在AngularJS中，ng-repeat指令允许我们将一个数组循环遍历并渲染到页面上。同时，它也提供了一种方便的方式来为每个元素绑定数据模型。然而，在使用ng-repeat的时候，有时候会遇到无法正确绑定ng-model的问题。本文将详细介绍这个问题，并提供解决方案。
问题描述
在使用ng-repeat循环时，如果我们尝试使用ng-model来绑定一个变量，可能会遇到这样的错误：
Error: ngModel:dupes Duplicate Key in Repeater
这个错误通常意味着我们在ng-repeat循环内部尝试绑定具有相同名称的ng-model。因为ng-repeat实际上是在创建多个作用域，所以如果我们不小心重复定义了一个变量或者使用了全局变量，就会导致这个错误的出现。
解决方案
为了解决这个问题，我们需要确保在ng-repeat循环中绑定ng-model时，每个模型都有自己独立的作用域。幸运的是，AngularJS为我们提供了类似于JavaScript闭包的机制——即通过在控制器中创建一个函数作用域来隔离每个ng-repeat循环。
下面是一段示例代码，可以清楚地说明如何使用这种技术来解决我们遇到的问题：
-- -------------------- ---- -------
---- -----------------------------
---- --------------- -- -------
------ ----------- --------------------------
------
------
--------
----------------------- ---
--------------------------- ---------------- -
------------ - -
- --- -- ----- ----- -- --
- --- -- ----- ----- -- -
--
------------ - ---
---
---------在这个例子中，我们通过为控制器MyController创建一个函数作用域来隔离了每个ng-repeat循环。同时，我们还定义了一个名为model的对象，它包含了所有需要绑定的变量。通过这种方式，每个循环内部都有自己独立的model对象，并且我们可以使用item.id作为键来访问和修改这些变量。
结论
在AngularJS中，使用ng-repeat循环时绑定ng-model时，我们必须确保每个模型都有自己独立的作用域。通过在控制器中创建函数作用域并使用一个名为model的对象来维护数据模型，我们可以轻松地解决这个问题。希望这篇文章能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25163