使用ngOptions發佈預選列表

我有一個名稱 - 值集合，用於填充select元素。我有一個模型，我想鏈接到選定值的ID。它在select元素更改時起作用，但我在初始模型值在頁面加載時填充select元素時遇到問題。這是一個plunker。使用ngOptions發佈預選列表

這裏是相應的代碼（控制器和視圖）：

$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（該That項的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。

在此先感謝。

來源

2015-10-12 im1dermike

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

來源

2015-10-12 17:25:05

謝謝！你在哪些情況下使用'track by'？ – im1dermike

當您不使用* select as *語法時：引用[documentation]（https://docs.angularjs.org/api/ng/directive/ngOptions）。由於我使用* select as *，因此我刪除了'track by'。 –

你有兩個選擇。您的預選值與您選擇的值不符。如果您添加了{{itemId}}，則在您選擇某個選項時您會看到它會發生變化。

這將是這樣的：{"id":"2","name":"That"}

根據您目前的ng-options需要您的items陣列預先選擇整個對象。或者改變你的表情。 item.id as item.name from item in items。但是對於後者，您的itemId變量將從entir對象變爲僅選定的對象id。

另外你不需要你的軌道，它會默認跟蹤元素索引。

來源

2015-10-12 17:29:36 ste2425

使用ngOptions發佈預選列表

回答

相關問題