Angular.js:使用ng-model进行ng-repeat中的下拉列表

时间:2013-02-07 11:10:20

标签: angularjs ng-repeat

我很难理解如何在ng-repeat中使用ng-model。 在此上下文中,CargoItems是一个包含LoadPoint的对象列表。 LoadPoint具有Id和Text属性。

我想显示文本,绑定到下拉列表中的当前选择,但我还想跟踪当前选择的ID。所以我不确定如何使用select绑定更新这两个属性,或者通过显式使用标记,或者使用我还没有想到的ng-options。

所以有两个问题:

1)如何将选择列表中的文本和值正确绑定到CargoItem.LoadPoint上的Id和Text属性?我有一种感觉我的模型可能是错的?

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>

提前致谢!

1 个答案:

答案 0 :(得分:13)

  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对象,Angular将自动为您执行此操作。以下是有关如何使用直接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')。< / p>

  3. jsFiddle http://jsfiddle.net/bmleite/baRb5/