AngularJS selecting option value within multiple selects onload

I am experienced with JavaScript and jQuery, but new to AngularJS. I have a list of items and each item has a select with multiple options. I have AngularJS populating the list and populating each select with all options. I can select the options and it adds them (categories) to my list like this.

$scope.items = [
    {"text":"Butter","out":false,"staple":true,"category":{"name":"Frozen Foods","order":"1"}},
    {"text":"Lemons","out":false,"staple":true,"category":{"name":"Produce","order":"2"}}
  ];

My list of categories looks like this.

$scope.categories = [
    {name:'Dry/Baking Goods ', order:'0'},
    {name:'Frozen Foods', order:'1'},
    {name:'Produce', order:'2'},
    {name:'Meats', order:'3'},
    {name:'Dairy', order:'4'},
    {name:'Snacks', order:'5'},
    {name:'Beverages', order:'6'},
    {name:'Bread/Bakery', order:'7'},
    {name:'Canned/Jarred Goods', order:'8'},
    {name:'Cleaners', order:'9'},
    {name:'Paper Goods', order:'10'},
    {name:'Personal Care', order:'11'},
    {name:'Other', order:'12'}
];

What I want to do is select the dropdowns when the page loads. Right now the page just loads with the first options index of 0 selected and it doesn't select to appropriate item in the select list when the page loads with the list of items.

I know I can do this without using AngularJS by using plain JavaScript or jQuery, but I am wondering if AngularJS has something built in that will select each dropdown according to the data that is building out the list.

Thanks!

Answers


Update: This has been asked before. The simple answer to your question is - no, angular doesn't have anything built in for doing this. How to set the initial value of a select created using ng-options with an Object as the value in angularjs Error with the initially selected option in a select


As described in the documentation for the select directive, and illustrated in a jsfiddle, ngModel compares by reference, not value. So even though your item.category has the same properties as one of the categories in the category array, angular will not see them as being the same.

If you can define your items like this: $scope.items = [ {text:"Butter", category: $scope.categories[1]}, {text:"Lemons", category: $scope.categories[2]} ];

then, the following ng-model binding will work as expected: <select ng-repeat="item in items" ng-model="item.category" ng-options="category as category.name for category in categories"> </select>

Here is a demo.


Need Your Help

UIControl: sendActionsForControlEvents omits UIEvent

iphone ios ipad subclass uicontrol

I want to implement a custom subclass of UIControl. It works beautifully except for one fatal problem that is making me spit teeth. Whenever I use sendActionsForControlEvents: to send an action mes...

Unable to register extension org.sonar.plugins.scala.cobertura.CoberturaSensor

scala gradle sonarqube sonar-runner

I am using SonarQube 5.1 and its running on localhost. It was working out of box for java, but when i added the plugin for scala - http://docs.codehaus.org/display/SONAR/Scala+Plugin (i checked out...