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/