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

时间：2022-08-23 23:06:31

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.

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

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.

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

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?

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

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.

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>

Thanks in advance!

提前致谢！

1 个解决方案

#1

13  

  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:

    绑定到整个对象引用，而不是使用“Id”属性（loadPoint.Id）。要做到这一点，只需更改ng-options并删除loadPoint.Id作为部分：

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

    如果您使用上述方法并正确引用LoadPoints对象，Angular将自动为您执行此操作。以下是有关如何使用直接LoadPoints对象引用的示例：

    $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').

    使用这种方法，cargoItem.LoadPoint（ngModel）将始终保持对整个LoadPoints对象的引用（即{Id：'1'，Text：'loadPointA'}），而不仅仅是其Id（即'1'）。

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

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

#1

13  

  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:

    绑定到整个对象引用，而不是使用“Id”属性（loadPoint.Id）。要做到这一点，只需更改ng-options并删除loadPoint.Id作为部分：

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

    如果您使用上述方法并正确引用LoadPoints对象，Angular将自动为您执行此操作。以下是有关如何使用直接LoadPoints对象引用的示例：

    $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').

    使用这种方法，cargoItem.LoadPoint（ngModel）将始终保持对整个LoadPoints对象的引用（即{Id：'1'，Text：'loadPointA'}），而不仅仅是其Id（即'1'）。

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

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

标签：

相关文章