AngularJS 对许多输入进行数据绑定的方式是什么？

我正在学习 angularjs，我希望能够让用户输入许多输入。当这些输入被输入list数组元素应该相应改变。我想尝试使用 ngRepeat 指令，但我读到，因为它创建了一个新范围，所以我无法进行数据绑定：

<div ng-repeat="item in list">
    <label>Input {{$index+1}}:</label>
    <input ng-model="item" type="text"/>
</div>

我想知道是否应该使用自定义指令来执行此操作或以不同的方式处理它。

数据绑定到原始“项目”不起作用的原因是 ng-repeat 为每个项目创建子范围的方式。对于每个项目，ng-repeat 都有一个新的子作用域原型继承自父作用域（参见下图中的虚线），and then它将项目的值分配给子范围上的新属性（下图中的红色项目）。新属性的名称是循环变量的名称。来自ng重复源代码 https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js:

childScope = scope.$new();
...
childScope[valueIdent] = value;

如果 item 是基元，则新的子作用域属性实际上会分配基元值的副本。此子作用域属性对父作用域不可见，并且您对输入字段所做的更改存储在该子作用域属性中。例如，假设我们在父范围内

$scope.list = [ 'value 1', 'value 2', 'value 3' ];

在 HTML 中：

<div ng-repeat="item in list">

然后，第一个子作用域将具有以下内容item属性，具有原始值 (value 1):

item: "value 1"

由于 ng-model 数据绑定，您对表单输入字段所做的更改存储在该子范围属性中。

您可以通过将子作用域记录到控制台来验证这一点。添加到您的 HTML 中的 ng-repeat 中：

<a ng-click="showScope($event)">show scope</a>

添加到您的控制器：

$scope.showScope = function(e) {
    console.log(angular.element(e.srcElement).scope());
}

---

With @Gloopy's approach, each child scope still gets a new "item" property, but because list is now an array of objects, childScope[valueIdent] = value; results in the item property's value being set to a reference to one of the array objects (not a copy).

使用 showScope() 技术，您将看到子作用域item属性的值引用数组对象之一——它不再是原始值。

也可以看看不要绑定到 ng-repeat 子作用域中的原语 https://github.com/angular/angular.js/issues/1267 and
AngularJS 中的范围原型/原型继承有哪些细微差别？ https://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs（其中包含使用 ng-repeat 时范围的图片）。