Set Selected Option In Dropdown in AngularJS onload

Question

In Angularjs, I have a DropDown:

<select ng-model="category" ng-change="categoryChanged(category)" class="form-control" 
data-ng-options="category as category.name for category in categories">
        <option value="">Select Category</option>
</select>

And I have a controller:

app.controller('searchBoxController', ['$scope', '$location', '$routeParams', 'categoryService', function ($scope, $location, $routeParams, categoryService) {
        categoryService.getParentCategory().$promise.then(
        function (model) {
            $scope.categories = model;
            $scope.category.id = $routeParams.categoryId;// Which is coming as "1"
        },
        function (error) {

        });

        $scope.categoryChanged = function (category) {
             alert(category.id);
        };
}]);

$routeParams.categoryId is coming as "1" but still it is not setting the selected option in the dropdown.

Possible duplicate of How do I set default value of select box in angularjs — xkcd149
– xkcd149, Commented Jan 18, 2017 at 8:16
You have to declare $scope.category = {}; at the beginning of your controller. — Mistalis
– Mistalis, Commented Jan 18, 2017 at 8:17
@xkcd149 Sorry to say but my question is not duplicate. I had only id from $routeParams whereas the question which is marked as duplicate is focusing on whole object. — Usman Khalid
– Usman Khalid, Commented Jan 18, 2017 at 9:39

devqon · Accepted Answer · 2017-01-18 08:23:32Z

2

Your categories variable is an array of objects, while you set the ng-model to an object with only an id. Because it is a whole new object, angular doesn't see it as a match of the category in your array, and won't select the correct one.

The solution is to set the $scope.category to the matching object of the array instead of creating a new one:

var id = $routeParams.categoryId;
// Find the category object with the given id and set it as the selected category
for (var i = 0; i < $scope.categories.length; i++){
    if ($scope.categories[i].id == id) {
        $scope.category = $scope.categories[i];
    }
}

edited Jan 18, 2017 at 8:23

answered Jan 18, 2017 at 8:18

devqon

14k2 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mihai Alexandru-Ionut · Accepted Answer · 2017-01-18 08:40:43Z

0

You have to change ng-model directive when promise operation is end.

<select  ng-model="category" ng-change="categoryChanged(category)" class="form-control" data-ng-options="category as category.name for category in categories">
    <option value="">Select Category</option>
</select>

Suppose you have var id = $routeParams.categoryId and its value is 2 for example. You have to find category from categories where category.id is 2. For this, the simpliest method is to use a filter method.

$scope.category = $scope.categories.filter(function(item){
        return item.id==$scope.id;
})[0];

Please take a look to working fiddle

edited Jan 18, 2017 at 8:40

answered Jan 18, 2017 at 8:18

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

1 Comment

devqon Over a year ago

I was not the downvoter, but I can see your given solution doesn't solve OP's question. You just set the category to the first item of the array instead of the one with the given id of the $routeParams

Collectives™ on Stack Overflow

Set Selected Option In Dropdown in AngularJS onload

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related