Question

我有一个名称 - 值集合，用于填充select元素。我有一个模型，我想链接到所选值的ID。它在select元素被更改时有效，但我在初始模型值填充页面加载时的select元素时遇到问题。这是plunker。

这是相应的代码（控制器和视图）：

$scope.items = 
  [ 
    {id: "1", name: 'This'},
    {id: "2", name: 'That'},
    {id: "3", name: 'Another'}
    ];
$scope.itemId = "2";

<select ng-model="itemId">
    <option value=""></option>
    <option ng-repeat="item in items" value="{{item.id}}">{{item.name}}</option>
</select>

在此示例中，我希望选择That选项，因为我的初始模型是2（id项的That。如果从选择列表中选择了Another，我希望模型（itemId）为＆＃34; 3＆＃34;。

我的Plunker中还包含另一种指定选择列表的方法：

<select ng-model="itemId" ng-options="item.name for item in items track by item.id">
    <option value=""></option>
</select>

我能够使用这种语法让模型成功预加载选择，但它需要我的模型成为整个项目对象，而不仅仅是id。

提前致谢。

Answer 1

ng-options语法：

如果您想匹配ng-model值，则必须选择id（但显示name）：

ng-options="item.id as item.name for item in items"

参见 plunker

重复<option>语法：

您可以使用ng-selected：

<option ng-repeat="item in items" value="{{item.id}}" ng-selected="item.id === itemId">

Answer 2

您有两种选择。您预先选择的值与您选择的值不匹配。如果您添加了{{itemId}}，则在选择选项时会看到它会发生变化。

会是这样的：{"id":"2","name":"That"}

使用当前的ng-options，您需要从items数组中预先选择整个对象。那或者将你的表达改变成类似的东西。 item.id as item.name from item in items。但是对于后者，您的itemId变量将从entir对象更改为仅选定的对象ID。

此外，您不需要跟踪，默认情况下它将按元素索引进行跟踪。

使用ngOptions发出预选列表

2 个答案: