具有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去除＆amp;在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点发生了什么。我编辑了第一个值吗？删除它＆amp;并插入一个新值？进行多次相互抵消的编辑？

在这个例子中，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

在这个例子中，我使用＆＃34;值对象＆＃34;设计模式。我将标量值包装在一个具有不可变标识符的对象中，而包装的值保持可变。

结合＆＃34;跟踪＆＃34; ng-repeat的语法，它允许Angular在add＆amp; amp;随后删除与编辑。 ng-repeat然后可以直接更新隔离范围中的绑定，而不是重新绘制整个页面。