javascript - 使用 ngOptions 发出预选列表

Question

我有一个名称-值集合，用于填充选择元素。我有一个模型，我想将其链接到所选值的 id。当选择元素更改时它可以工作，但是我在将初始模型值填充到页面加载时的选择元素时遇到问题。这是plunker .

下面是相应的代码( Controller 和 View ):

$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那个 项目)。如果从选择列表中选择 Another，我希望模型 (itemId) 为“3”。

我的 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">