AngularJS:如何将ng-model绑定到ng-repeat内的数组

时间:2022-11-16 20:33:19

I can't seem to make my multiple dropdowns to work.

我似乎无法使我的多个下拉列表工作。

<div ng-repeat="i in [0,1,2,3,4] track by $index">
    <select ng-model="myArray[i]" ng-options="someList"></select>
</div>

In the html the result is ... ng-model="myArray[i] instead of ng-model="myArray[0] etc.

在html中,结果是... ng-model =“myArray [i]而不是ng-model =”myArray [0]等。

I have tried curly brackets but it doesn't work. closest thing was ng-model="myArray['{{ i }}'] but that' not really what I want.

我试过大括号,但它不起作用。最接近的是ng-model =“myArray ['{{i}}'],但那不是我想要的。

Edit: Here is a fiddle to illustrate.

编辑:这是一个小提琴来说明。

http://jsfiddle.net/dpkzzyug/1/

http://jsfiddle.net/dpkzzyug/1/

You need to examine the HTML to see that the result literally writes out i (or $index in this case) instead of the value.

您需要检查HTML以查看结果字面上写出i(或在这种情况下为$ index)而不是值。

2 个解决方案

#1


2  

The code that you have works, but the problem is that myArray is local to the ng-repeat scope. You need to make sure that myArray exists outside of this scope.

您可以使用的代码,但问题是myArray是ng-repeat范围的本地代码。您需要确保myArray存在于此范围之外。

Something like the following will work:

像下面这样的东西会起作用:

<div ng-app ng-init="someList=[1,2,3]; myArray = []">
    <div ng-repeat="i in [0,1,2,3,4] track by $index">
        <select ng-model="myArray[i]" ng-options="i for i in someList"></select>

http://jsfiddle.net/778x0pm0/1/

http://jsfiddle.net/778x0pm0/1/

I would personally prefer to use the controller as syntax since this makes this a little clearer:

我个人更喜欢使用控制器作为语法,因为这使得这一点更清晰:

<div ng-app=app ng-init="someList=[1,2,3]">
    <div ng-controller="ctrl as ctrl">
        <div ng-repeat="i in [0,1,2,3,4] track by $index">
            <select ng-model="ctrl.myArray[i]" ng-options="i for i in someList"></select>

http://jsfiddle.net/778x0pm0/

http://jsfiddle.net/778x0pm0/

#2


0  

I just realized that the html will write out i / $index even though the logics of angular still work. I was having problems elsewhere and thought it was because of this.

我刚刚意识到html会写出i / $ index,即使angular的逻辑仍然有用。我在其他地方遇到了问题,并认为是因为这个原因。

#1


2  

The code that you have works, but the problem is that myArray is local to the ng-repeat scope. You need to make sure that myArray exists outside of this scope.

您可以使用的代码,但问题是myArray是ng-repeat范围的本地代码。您需要确保myArray存在于此范围之外。

Something like the following will work:

像下面这样的东西会起作用:

<div ng-app ng-init="someList=[1,2,3]; myArray = []">
    <div ng-repeat="i in [0,1,2,3,4] track by $index">
        <select ng-model="myArray[i]" ng-options="i for i in someList"></select>

http://jsfiddle.net/778x0pm0/1/

http://jsfiddle.net/778x0pm0/1/

I would personally prefer to use the controller as syntax since this makes this a little clearer:

我个人更喜欢使用控制器作为语法,因为这使得这一点更清晰:

<div ng-app=app ng-init="someList=[1,2,3]">
    <div ng-controller="ctrl as ctrl">
        <div ng-repeat="i in [0,1,2,3,4] track by $index">
            <select ng-model="ctrl.myArray[i]" ng-options="i for i in someList"></select>

http://jsfiddle.net/778x0pm0/

http://jsfiddle.net/778x0pm0/

#2


0  

I just realized that the html will write out i / $index even though the logics of angular still work. I was having problems elsewhere and thought it was because of this.

我刚刚意识到html会写出i / $ index,即使angular的逻辑仍然有用。我在其他地方遇到了问题,并认为是因为这个原因。