7

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

我想显示文本，绑定到下拉列表中的当前选择，但我也想跟踪当然选择了哪个 Id。所以我不确定如何使用选择绑定更新这两个属性，或者通过显式使用标签，或者使用我还没有真正弄清楚的 ng-options。

所以两个问题：

1) 如何将选择列表中的文本和值正确绑定到 CargoItem.LoadPoint 上的 Id 和 Text 属性？我感觉我的 ng-model 可能是错误的？

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>

提前致谢！

4

1 回答 1

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'）。

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

于 2013-02-07T11:39:34.637 回答