angularjs -Setting the selected value in a select dropdown when editing an item

Question

How can I set the selected value of a dropdown when I edit an item ?

<div class="form-group">
    <label for="category" class="col-sm-2 control-label">Category</label>
    <div class="col-sm-10">
        <select ng-model="quiz.category" ng-options="category as category.name for category in categories" required>
            <option></option>
        </select>
    </div>
</div>

And when I click on edit

$scope.editQuiz = function(quiz)
    {   
        $scope.quiz = {};
        $scope.quiz.name = quiz.name // this works fine
        $scope.quiz.category = quiz.category[0]; // ?????
        console.log($scope.quiz.category);
        //$scope.quiz = quiz;  

    }

Method to get categories:

$scope.getCategories = function() {
    $http.get('http://localhost/myappi/API/index.php/Api/categories').
        success(function(data) {

            $scope.categories = data;   
        })
        .error(function(err) {
        console.log('error',err);
    })
    };

quiz.category will give me an Array[1] , quiz.category[0] will give me the object. forgot to mention. — Cristian, Jan 13 '16 at 15:42
I have one select that is populated by a list called categories(that I get from a server). — Cristian, Jan 13 '16 at 15:44
quiz.category holds always one item? or you may have multiple categories? — koox00, Jan 13 '16 at 16:05
Only one category, but I think I explaned it wrong. I managed to add a quiz and attach a category to it. Now I'm trying basically to edit a quiz and change it's category. I will add a picture — Cristian, Jan 13 '16 at 16:11

score 0 · Answer 1 · edited May 23 '17 at 11:44

0

Changing the select's ngModel is definitely the way to go. You can check out this solution, since I believe it deals with the same problem.

$scope.options = [{ name: "a", id: 1 }, { name: "b", id: 2 }]; $scope.selectedOption = $scope.options[1];

<select data-ng-options="o.name for o in options" data-ng-model="selectedOption"></select>

Can you send us your data structure sample?

edited May 23 '17 at 11:44

Community

1
1

answered Jan 13 '16 at 15:49

Nemanja Milosavljevic

1,251
18
33

koox00 · Accepted Answer · 2016-01-13T16:54:20.277

0

Ok if you really want to keep quiz.category as an array.
At first when you get the quiz assign quiz.category to an new object. e.g:

$scope.tmp = { category: quiz.category[0] };

We have to do that since quiz.category is an array but the value of the ng-options is an object.

now we can bind that var to the options like this:

<select ng-model="tmp.category" ng-options="category as category.name for category in categories" required>
        <option></option>
</select>

and finally in your function you replace the old value with the new:

$scope.quiz.category[0] = tmp.category;

Hope it makes sense

edited Jan 13 '16 at 16:54

answered Jan 13 '16 at 15:59

koox00

2,691
2
15
25

Thanks for the help changed it to a model and managed to get it to work. – Cristian Jan 13 '16 at 16:59

score 0 · Answer 3 · answered Jan 13 '16 at 16:31

0

Use "track by" inside the ng-options

category as category.name for category in categories track by category.id

working example

answered Jan 13 '16 at 16:31

puemos

1,109
9
12

angularjs -Setting the selected value in a select dropdown when editing an item

3 Answers3