在 html 标签中动态更改 ng-model 的名称答案

【问题标题】：Dynamically change name of ng-model in html tag在 html 标签中动态更改 ng-model 的名称
【发布时间】：2013-11-15 01:41:20
【问题描述】：

我想为每个输入标签动态更改我的 ng-model 名称（在 html 输入标签中）。例如，如果我的 json 文件如下所示：

[{cows: 0, pigs: 14, roosters: 2, horses: 23, goats: 21}]

我正在使用 ng-repeat 遍历 json 对象（“items”）的属性，我应该为 ng-model="????" 输入什么将该特定输入与特定对象属性（动物）绑定？

<div ng-app="myApp" ng-controller="MainCtrl">
    <form class="idea item">
        <div ng-repeat="(key, value) in items[0]">
            <label>{{key}}</label>
            <input type="range" value="{{value}}" min="0" max="4" ng-model="????" />
        </div>
        <input type="submit" ng-click="save()" />
    </form>
</div>

如果我在不使用 ng-repeat 的情况下静态写出，输入将如下所示：

<input type="range" value="{{value}}" min="0" max="4" ng-model="items[0].cows" />
<input type="range" value="{{value}}" min="0" max="4" ng-model="items[0].pigs" />
<input type="range" value="{{value}}" min="0" max="4" ng-model="items[0].roosters" />
<input type="range" value="{{value}}" min="0" max="4" ng-model="items[0].horses" />
<input type="range" value="{{value}}" min="0" max="4" ng-model="items[0].goats" />

但是，我希望它是动态的，因为我不知道需要什么属性名称。

【问题讨论】：

标签： javascript jquery html json angularjs

【解决方案1】：

只需使用关联索引：

<input type="range" value="{{value}}" min="0" max="4" ng-model="items[0][key]" />

换句话说，您始终可以通过关联数组访问变量。以下是等价的：

item[0].pigs
item[0]['pigs']

您可以利用它来发挥自己的优势，因为您知道中继器中的 key。

【讨论】：