Angular.js: 在 ng-repeat 中未正确处理字符串数组

创建于 2012-08-15 · 22评论 · 资料来源: angular/angular.js

当显示数组中的一系列值时，数据项没有正确绑定到模型，如下所示：

$scope.model = {
  values: [
    "Value 1",
    "Value 2,
    ...
  ]
}

如果在一系列输入字段中显示上述内容，则对内容的更改不会反映在模型中。但是，使用如下代码绑定上述内容确实保持了与模型的绑定：

<div ng-repeat="value in model.values">
  <input type="text" ng-model="model.values[$index]" />
</div>

然而，这种方法的问题是文本字段失去了对每个键的关注。一个演示在这里：
http://jsfiddle.net/donovanh/GSx76/

资料来源

donovanh

最有用的评论

我能够解决这个问题，并通过使用 track by（针对 1.3 版进行测试）来避免失去焦点的问题

<div ng-repeat="value in model.values track by $index">
  <input type="text" ng-model="model.values[$index]">
</div>

toboid 于 2015-01-29

👍9 🎉3

所有22条评论

我假设你有这个：

 <div ng-repeat="model.values 中的值">
 <input type="text" ng-model="value" />
 </div>

这将不起作用，因为您绑定到一个范围。基本上你必须在ng-model有一个. ng-model否则反向数据绑定不适用于原语。

所以这基本上是预期的，因为您绑定到 scope.value 属性而不是转发器中的原始值。

您的解决方法也预期闪烁，因为数据绑定更改了数组，然后使转发器看起来好像Value 1离开了，新的Value 2X出现了，因此转发器删除旧的 DOM节点并用新的 DOM 节点替换它，因此失去焦点。

我知道这是违反直觉的，但这就是系统的架构方式。不要绑定到原语是我的答案。

mhevery 于 2012-08-15

感谢您的跟进。我将调整我的数据结构以考虑到这一点。

donovanh 于 2012-08-15

我的例子也不起作用： http :

我遵循了此处给出的解决方案，但没有产生任何效果，问题仍然存在。

nicholasrq 于 2012-11-15

这里给出的解决方案说，“你必须在ng-model有一个. ng-model 。” 你没有这样做。你的是ng-model="field" 。
您需要重组您的数据，以便您拥有一个 _objects_ 而不是字符串的数组。
这是一个固定的小提琴： http :

petebacondarwin 于 2012-11-15

哦，我的错。谢谢。

nicholasrq 于 2012-11-15

我想将这项工作作为功能请求提交（尽管我承认这不太可能，因为到目前为止对这个问题的回应哈哈）。这条评论是否足以做到这一点，还是我应该开一个新问题？

NickHeiner 于 2012-12-11

你试过这个版本的 ng-repeat 指令吗？
https://github.com/angular/angular.js/pull/1661
它修复了转发器在原始值方面的许多问题。
@NickHeiner ：我不确定您要求什么特定功能？

petebacondarwin 于 2012-12-12

我正在请求一个功能，您可以在其中直接绑定到 ng-repeat 中的字符串。

NickHeiner 于 2012-12-12

你现在可以这样做了。我怀疑您的意思是您希望在更新字符串时更新 ng-repeat 之外的范围？

petebacondarwin 于 2012-12-12

是的，我希望能够在字符串列表的ng-repeat使用ng-model并且能够按预期进行双向绑定工作。

我明白为什么它现在不起作用，并意识到让它工作可能比它的价值更麻烦，但我认为值得研究，因为它会使 angular 更容易使用。

NickHeiner 于 2012-12-12

在不改变 Javascript 工作方式的情况下使其工作的唯一方法
是在重复循环中使用 someArray[$index] 。例如

这允许您直接引用元素，以便更改
反映在数组中。

但这在当前的 ng-repeat 实现中不能正常工作
因为包含输入的 div 不断被破坏或移动
围绕每个变化。我之前引用的修复程序确实允许这样做。

2012年12月12日15:35，尼克·海纳[email protected]写道：

是的，我希望能够在 ng-repeat 中使用 ng-model
字符串列表，并能够按预期进行两种方式的绑定工作。
我明白为什么它现在不起作用，并意识到让它起作用
可能比它的价值更麻烦，但我认为值得研究
因为它会使 angular 更容易使用。
—
直接回复本邮件或在 Gi tHub上查看

petebacondarwin 于 2012-12-12

👍3

是的，这有效。谢谢！

NickHeiner 于 2012-12-14

这适用于 angular 1.1.4-（重复字符串数组）

http://jsfiddle.net/ez86K/

joshuawoodward 于 2013-12-09

这是一种将字符串数组的成员有效绑定到 UI 组件的方法。我使用了 textarea 框，但可以通过输入或其他方式完成相同的操作：

http://jsfiddle.net/VvnWY/4/

webnesto 于 2014-04-12

嗨，请我需要将文本字段绑定到 ng-repeat 中的每一行。我希望文本字段的每一行都有不同的值。我的 ng-model 将一个值绑定到我的 ng-repeat 中的所有文本字段。请问你如何建议我继续。

babaphemy 于 2015-01-13

好的，我想出了一种使用最新版本的 angular 让它工作的方法。如果数组的大小不会改变，那么您可以使用一次绑定，如下所示：

<li ng-repeat="str in ::arrayOfStrings">
<input ng-model="arrayOfStrings[$index]" />
<br/>
</li>

这将防止重复更改 dom 并且将正确观察对基元的更改。

phillipCouto 于 2015-01-28

👍5

我能够解决这个问题，并通过使用 track by（针对 1.3 版进行测试）来避免失去焦点的问题

<div ng-repeat="value in model.values track by $index">
  <input type="text" ng-model="model.values[$index]">
</div>

toboid 于 2015-01-29

👍9 🎉3

toboid：感谢分享该解决方法！我遇到过将数组数据重组为对象数组会非常麻烦的情况（在递归指令视图中）。按 $index 跟踪有帮助。

我想知道为什么“跟踪”可以解决这个问题？根本原因是什么？

joselee 于 2015-06-02

感谢@toboid解决了我的问题，它有效。

如果您不想将对象包装在数组中

<div ng-repeat="value in model.values track by $index">
  <input type="text" ng-model="model.values[$index]">
</div>

ufologist 于 2015-06-16

👍5 🎉4 ❤2

Angular.js: 在 ng-repeat 中未正确处理字符串数组

最有用的评论

所有22条评论

相关问题