Angular.js：采用NG-型号为NG-重复内的下拉列表中 [英] Angular.js: Using ng-model for dropdowns within ng-repeat

问题描述

我有一个很难理解如何使用NG重复内NG-模式。
在这种情况下，CargoItems是对他们有装载点的对象的列表。 LOADPOINT有id和text属性。

我要显示文本，势必会在下拉列表中当前的选择，但我也想跟踪哪个ID被选择，当然。所以我不知道如何通过显式使用标记，或者使用我还没有真正想通了没有NG选项更新选择绑定两个属性。

于是两个问题：

1）如何正确地结合选择列表在我CargoItem.LoadPoint Id和Text属性的文本和价值？我有一种感觉我的NG-模型可能是错误的？

2）如何使用NG选项默认为所选值？我想通了这一点写我自己选择的标签，但我想用NG选项如果可能的话。

 ＆LT; D​​IV NG重复=cargoItem在cargo.CargoItems＆GT;
    ＆LT;跨度＆GT;所选的负载点：{{cargo.LoadPoint.Text}}＆LT; / SPAN＆GT;
    ＆LT;选择NG模型=cargoItem.LoadPointNG选项=loadPoint.Id在LoadPoints loadPoint.Text的装载点＆GT;＆LT; /选择＆GT;
＆LT; / DIV＆GT;
 

在此先感谢！

解决方案

1. 绑定到整个对象引用，而不是使用'ID'属性（ loadPoint.Id ）。要做到这一点，只需更改 NG-选项和删除 loadPoint.Id为部分：

    ＆LT;选择NG模型=cargoItem.LoadPointNG选项=loadPoint.Text为LOADPOINT在LoadPoints＆GT;＆LT; /选择＆GT;
    




2. 如果您使用上述方法和正确的参考对象LoadPoints，角度会自动为你做的。下面是关于如何使用直接LoadPoints一个例子对象引用：

     $ scope.LoadPoints = {[编号：'1'，文本：loadPointA'}，{ID：'2'，文本：loadPointB'}]
   $ scope.cargo = {
       CargoItems：[{
           LOADPOINT：$ scope.LoadPoints [0]
       }，{
           装载点：$ scope.LoadPoints [1]
       }]
   };
    

   使用这种方法， cargoItem.LoadPoint （该ngModel）将始终坚持整个LoadPoints对象的引用（即 {ID：1 ，文：'loadPointA'} ），不仅其ID（即 1 ）

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

I'm having a hard time understanding how to use ng-model within ng-repeat. In this context, CargoItems is a list of objects that have a LoadPoint on them. LoadPoint has Id and Text properties.

I want to show the text, bound to the current selection in the dropdown, but I also want to track which Id is selected of course. So I'm not sure how to update both properties with the select bindings, either through an explicit use of tags, or using ng-options which I haven't really figured out yet.

So two questions:

1) how do I properly bind both the text and value from the select list to the Id and Text properties on my CargoItem.LoadPoint? I have a feeling my ng-model might be wrong?

2) how do I use ng-options to default to the selected value? I figured this out writing my own option tag, but I'd like to use ng-options if possible.

<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>

Thanks in advance!

解决方案

1. Bind to the entire object reference instead of using the 'Id' property (loadPoint.Id). To do that, just change the ng-options and remove the loadPoint.Id as part:

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

2. If you use the above approach and the correct reference to the LoadPoints object, Angular will do that for you automatically. Here's an example on how to use a direct LoadPoints object reference:

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

   Using this approach, cargoItem.LoadPoint (the ngModel) will always hold a reference to the entire LoadPoints object (i.e. { Id: '1', Text: 'loadPointA' }), and not only its Id (i.e. '1').

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

这篇关于Angular.js：采用NG-型号为NG-重复内的下拉列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！