Question

我遇到<select>输入并与AngluarJS绑定时遇到问题。我在Plunker上创建了一个最小工作样本：http://plnkr.co/edit/P4T25RoJrU4mvbBiUJ9S?p=preview。

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

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

Answer 1

两个问题：

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

JS

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

Answer 2

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

如果您通过option.id删除＆＃34;曲目＆＃34;从ng-options中可以看出，它应该根据你的模型进行预选。

<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

AngularJS和Select绑定无法加载默认值

2 个答案: