AngularJS 和 Select 绑定不加载默认值的问题答案

【问题标题】：Trouble with AngularJS and Select binding not loading default valuesAngularJS 和 Select 绑定不加载默认值的问题
【发布时间】：2016-03-01 21:01:55
【问题描述】：

我在<select> 输入和与 AngluarJS 的绑定方面遇到问题。我在 Plunker 上创建了一个最低工作示例：http://plnkr.co/edit/P4T25RoJrU4mvbBiUJ9S?p=preview。

基本问题如下：下拉列表中的值永远不会预先选择我模型中的值。

此外，在 Angular 1.1.5 中，ng-options 似乎在生成的 <option> 标记上不包含“标签”，因此当您更改选择时，下拉控件不会注册任何更改。

【问题讨论】：

如果您从 ng-options 中删除“track by option.id”，它应该根据您的模型预先选择。我有修改后的 Plunker：plnkr.co/edit/b4ddyA5Q4jGNcJI1d8eW?p=preview
是的，我试过了，我什么都没得到......
@VivekN 这似乎解决了我的问题。非常感谢你。将其发布为答案，以便我接受。

标签： javascript angularjs data-binding

【解决方案1】：

两个问题：

比较字符串和字符串
在同一表达式中使用select as 和track by 时要小心。

angular.module('defaultValueSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     availableOptions: [
       {id: '1', name: 'Option A'},
       {id: '2', name: 'Option B'},
       {id: '3', name: 'Option C'}
     ],
     //USE this
     selectedOption: '2'
     //NOT this
     //selectedOption: 2 //This sets the default value
     };
 }]);

HTML

<!-- remove 'track by option.id' -->

<select name="mySelect" id="mySelect"
    ng-options="option.id as option.name for option 
                in data.availableOptions track by option.id"
    ng-model="data.selectedOption">
</select>

来自文档：

在同一个表达式中使用select as 和track by 时要小心。

这将起作用：

<select 
    ng-options="item as item.label for item in items track by item.id"
    ng-model="selected">
</select>

但这不起作用：

<select 
    ng-options="item.subItem as item.label for item in items track by item.id"
    ng-model="selected">
</select>

-- AngularJS ng-options Directive API Reference

【讨论】：

【解决方案2】：

根据 OP 的要求，添加评论作为答案。

如果您从 ng-options 中删除“track by option.id”，如下所示，它应该根据您的模型预先选择。

<select name="mySelect" id="mySelect"
      ng-options="option.id as option.name for option in data.availableOptions"
      ng-model="data.selectedOption"></select>

查看修改后的 Plunker：http://plnkr.co/edit/b4ddyA5Q4jGNcJI1d8eW?p=preview

【讨论】：