angularjs – Angular.js:在ng-repeat中使用ng-model进行下拉

我很难理解如何在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>

提前致谢!

>绑定到整个对象引用,而不是使用“Id”属性(loadPoint.Id).要做到这一点,只需更改ng-options并删除loadPoint.Id作为部分:
<select ng-model="cargoItem.LoadPoint" ng-options="loadPoint.Text for loadPoint in LoadPoints"></select>

>如果您使用上述方法并正确引用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/

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...