带有ng-repeat Angular的动态表单控件

Question

在我的控制器中：

$scope.mytest = [1,2,3];

我的观点：

<div ng-repeat="foo in mytest">
    {{foo}}
    <input type="text" ng-model="mytest[$index]" name="$index" />
</div>
{{ mytest | json }}

当我加载页面时，它将呈现以下内容：

我可以更改值，绑定将更新所有值：

唯一的问题是表单字段失去焦点。 ng-model更新范围的值时，它将导致ng-repeat操纵dom，并且每次按键后这些字段都失去焦点。 我必须在每次按键之间单击该字段，以输入一个长度超过1个字符的值。

我要在这里完成的工作是为数组的每个值呈现一个文本字段。 更新文本字段应该更新范围值，并且还更新我在ng-repeat内部和外部在视图中显示这些值的所有位置

Answer 1

弄清楚了。 我将数组更改为具有ID的对象数组：

$scope.mytest = [{id:1, title:'one'}, {id:2, title:'two'}];

然后，我阻止了ng-repeat在它更改时删除并重新插入dom节点：

<div ng-repeat="foo in mytest track by foo.id">

我之前从原始帖子中尝试过的尝试失败了。 在说明原因的此示例中，您可以看到Angular无法识别所做的更改：

[1,2,3] // point A
[2,2,3] // point B

Angular无法知道从点A到点B发生了什么。我是否编辑了第一个值？ 删除它并插入新值？ 进行多次相互抵消的修改？

在此示例中，Angular能够辨别从点A到点B的情况：

$scope.mytest = [{id:1, title:'one'}, {id:2, title:'two'}]; // point A
$scope.mytest = [{id:1, title:'two'}, {id:2, title:'two'}]; // point B

在此示例中，我使用“值对象”设计模式。 我将标量值包装在一个具有不变标识符的对象中，而包装后的值仍然是可变的。

与ng-repeat的“ track by”语法结合使用，它可使Angular区分添加和后续删除与编辑。 然后ng-repeat可以直接更新独立范围中的绑定，而不是重新绘制整个织补页面。