Angular.js：在ng-repeat中使用ng-model下拉菜單

Question

我很難理解如何在ng-repeat中使用ng-model。 在這種情況下，CargoItems是一個有LoadPoint的對象列表。 LoadPoint具有Id和Text屬性。

我想顯示文本，綁定到當前選擇的下拉列表中，但我也想跟蹤哪個ID被選中。所以我不知道如何使用選擇綁定來更新這兩個屬性，無論是通過顯式使用標籤還是使用ng-options，我還沒有真正想到。

所以兩個問題：

1）如何正確地結合選擇列表在我CargoItem.LoadPoint Id和Text屬性的文本和價值？我有一種感覺，我的ng模型可能是錯的？

2）如何使用ng-options來默認選定的值？我想到寫出自己的選項標籤，但如果可能的話，我想使用ng-options。

<div ng-repeat="cargoItem in cargo.CargoItems"> 
    <span>Selected Load Point: {{cargo.LoadPoint.Text}}</span> 
    <select ng-model="cargoItem.LoadPoint" ng-options="loadPoint.Id as loadPoint.Text for loadPoint in LoadPoints"></select> 
</div> 

在此先感謝！

Answer 1

1. 綁定到整個對象引用，而不是使用'Id'屬性（loadPoint.Id）。要做到這一點，只需更改ng-options並刪除loadPoint.Id as部分：

   <select ng-model="cargoItem.LoadPoint" ng-options="loadPoint.Text for loadPoint in LoadPoints"></select> 
   

2. 如果你使用上面的方法和正確的參照對象LoadPoints，角度會自動爲你做的。下面是關於如何使用直接LoadPoints一個例子對象引用：

   $scope.LoadPoints = [{ Id: '1', Text: 'loadPointA' },{ Id: '2', Text: 'loadPointB' }];   
   $scope.cargo = { 
       CargoItems: [{ 
        LoadPoint: $scope.LoadPoints[0] 
       }, { 
        LoadPoint: $scope.LoadPoints[1] 
       }] 
   }; 
   

   使用這種方法，cargoItem.LoadPoint（該ngModel）將始終保持一個參考整個LoadPoints對象（即{ Id: '1', Text: 'loadPointA' }），不僅其ID（即'1'）。

的jsfiddle：http://jsfiddle.net/bmleite/baRb5/