javascript - 数据绑定(bind)许多输入的 angularjs 方法是什么？

Question

我正在学习 angularjs，我希望能够让用户输入很多内容。输入这些输入后，list 数组元素应相应更改。我想尝试使用 ngRepeat 指令，但我读到，因为它创建了一个新范围，所以我无法进行数据绑定(bind):

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

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

Answer 1

数据绑定(bind)到原始“项目”不起作用的原因是 ng-repeat 为每个项目创建子范围的方式。对于每个项目，ng-repeat 都有新的子作用域原型(prototype)继承自父作用域(见下图中的虚线)，然后它将项目的值分配给子作用域的新属性(下图中的红色项目)。新属性的名称是循环变量的名称。来自ng-repeat source code :

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 数据绑定(bind)，您对表单输入字段所做的更改存储在该子范围属性中。

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

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

添加到您的 Controller :

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

---

使用@Gloopy 的方法，每个子作用域仍然获得一个新的“item”属性，但是因为列表现在是一个对象数组， childScope[valueIdent] = value; 导致 item 属性的值被设置为对数组对象之一的引用(不是副本)。

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

另见 don't bind to primitives in ng-repeat child scopes和
What are the nuances of scope prototypal / prototypical inheritance in AngularJS? (其中包含使用 ng-repeat 时范围的图片)。