Question

我对JavaScript和jQuery很有经验，但对AngularJS来说是新手。我有一个项目列表，每个项目都有一个选项，有多个选项。我有AngularJS填充列表并用所有选项填充每个选择。我可以选择选项，然后将它们（类别）添加到我的列表中。

$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"}}
  ];

我的类别列表如下所示。

$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'}
];

我想要做的是选择页面加载时的下拉列表。现在，页面只是加载了第一个选项索引为0，当页面加载项目列表时，它不会选择选择列表中的相应项目。

我知道我可以通过使用纯JavaScript或jQuery而不使用AngularJS来实现这一点，但我想知道AngularJS是否内置了一些内容，它将根据构建列表的数据选择每个下拉列表。

谢谢！

Answer 1

更新：
以前曾经问过这个问题。对你的问题的简单回答是：不，角度没有任何内置的东西。
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

如documentation for the select directive和插图in a jsfiddle中所述，ngModel按引用进行比较，而不是值。因此，即使您的item.category与类别数组中的某个类别具有相同的属性，angular也不会将它们视为相同。

如果您可以像这样定义您的项目：
    $scope.items = [
    {text:"Butter", category: $scope.categories[1]},
    {text:"Lemons", category: $scope.categories[2]}
    ];

然后，以下ng-model绑定将按预期工作：
    <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.

AngularJS在多个选择onload中选择选项值

1 个答案: