Question

我想在AngularJS中迭代一个数组，如下所示：

var languages = ['en', 'es', 'fr'];

生成这样的东西：

<input type="text" ng-model="mymodel.en" placeholder="Name (EN)">
<input type="text" ng-model="mymodel.es" placeholder="Name (ES)">
<input type="text" ng-model="mymodel.fr" placeholder="Name (FR)">

我试过这个：

<div ng-repeat="language in languages">
   <input type="text" ng-model="mymodel.{{language}}" placeholder="Name ({{language | uppercase}})">
</div>

但是引发了一个错误：

＆＃34;语法错误：令牌＆＃39; {＆＃39;列是...＆＃34;
的意外标记

我应该如何执行此循环？

Answer 1

使用mymodel[language]代替mymodel.{{language}}

<div ng-repeat="language in languages"> 
   <input type="text" ng-model="mymodel[language]" placeholder="Name ({{language | uppercase}})">
</div>

plnkr

请参阅plnkr，然后在任何输入字段中输入以查看模型更改。

Answer 2

你不应该在ng-model中使用{{}}符号，你可以在mymodel对象中引用你的属性。

但似乎你试图通过模型以某种方式为你的输入进行绑定。它不会在你的情况下工作，因为你需要初始mg模型指令。

为了从动态生成中捕获模型中的更改，您需要使用$ compile service编译已使用的指令。

您可以在这里查看sample。我用谷歌搜索了它，但我以类似的方式解决了类似的问题。

Answer 3

你可以尝试这样的事情，

<input type="text" ng-model="mymodel[language]" ...

在ngRepeat中分配AngularJS模型

3 个答案: