Angular.js：具有ng-options對象屬性的HTML select元素

Question

我正在構建我的第一個AngularJS應用，我非常喜歡到目前為止所看到的概念。

現在，我想將以下數據結構作為選擇的HTML元素引入視圖中：

var objs = {
  "A1": 12234,
  "A2": 2354,
  "A3": 2323434
}

我試圖將數據結構objs綁定到一個select下拉列表，如下所示：

<select ng-model="finallySelectedEntry" ng-options="id as name for (name , id) in objs">
     <option>--</option>
</select>

結果是：

<option value="A1" selected="selected">A1</option>
<option value="A2">A2</option>
<option value="A3">A3</option>

..但我希望：

<option value="12234" selected="selected">A1</option>
<option value="2354">A2</option>
<option value="2323434">A3</option>

切換到

<select ng-model="finallySelectedEntry" ng-options="name as id for (name , id) in objs">

不起作用..

有人知道我的錯嗎？ 我盡量避免用ng-repeat來做。

Answer 1

確實，選擇使用哪個屬性作為選擇的值並不重要，因為無論如何都使用角度將選擇作為數據模型進行管理，但是您需要使用track by （track by id）來做到這一點：

嘗試：-

 <select ng-model="finallySelectedEntry" 
    ng-options="id as name for (name , id) in objs track by id">

演示

重要的提示：

在演示中，我使用的是angular 1.3.x，在使用track by以及select as angular 1.2.x的語法時出現錯誤，我將無法正確選擇select。 因此，如果您使用的1.2.x版本的angular擺脫了select作為語法並適當地綁定模型，那么您可能還想更改數據模型以將其綁定為對象數組，而不是按原樣綁定對象。