将输入绑定到使用ngRepeat的原始数组=>不可编辑的输入

15 浏览
0 Comments

将输入绑定到使用ngRepeat的原始数组=>不可编辑的输入

这是一个关于我的问题的演示。为什么输入框不可编辑/只读?如果这是设计上的问题,背后的原理是什么?

更新于2014年2月20日

在v1.2.0+的版本中,这似乎不再是一个问题。但请记住,尽管新版本的angularJS中的用户控件现在是可编辑的,但修改的是子作用域中的num属性,而不是父作用域。换句话说,修改用户控件中的值不会影响myNumbers数组。

0
0 Comments

问题原因:Angular无法直接对以该方式定义的模型进行写入操作。

解决方法:使用对初始$scope属性的引用,以便让它能够正确地绑定值。

代码示例:

实际上,使用绑定视图的可编辑集合是一个相当棘手的任务。如果您感兴趣,请查看解决此问题的一种方法。

参考链接:[iweinfuld.posterous.com/…](http://iweinfuld.posterous.com/expanding-collections-with-inline-edit-in-ang)

此外,避免在控制器中使用$index。如果您通过ngFilter在视图上筛选数据,视图中的索引将不会引用原始数组中的索引,因为视图中的数组和模型中的数组是不同的。

关于为什么绑定到重复表达式中的变量(即此案例中的num)不起作用的原因,不论是因为错误还是设计限制,我更感兴趣。

另外,需要注意的是,更新视图不应该使输入框丢失焦点。如果我们有$scope.foo = "hello"并将一个和一个绑定到它,当我通过更改foo时,会被更新,但焦点仍然保持在输入框中。

根据这个[链接](https://github.com/angular/angular.js/issues/1267#issuecomment-7762446)中的回答,这种问题是因为数据绑定会改变数组,使得重复器认为旧值离开了并出现了新值,因此重复器会移除旧的DOM节点并用新的DOM节点替换,导致焦点丢失。所以,不要绑定到原始类型的变量。

0
0 Comments

问题的原因是因为在Angular 1.0.3版本中,当使用ngRepeat指令绑定到一个原始类型的数组时,输入框会变成只读的。在此之前,ngRepeat的子作用域中的值在输入框中进行更改时会实际改变,但是自从1.0.3版本以后,ngRepeat在每个digest循环中都会用父作用域的值替换子作用域中ngRepeat的值,导致输入框无法编辑。

解决方法是在控制器中使用一个对象的数组来替代原始类型的数组,并且在ngRepeat中绑定到对象的属性上。这样就可以实现输入框的编辑。另外,在控制器中可以通过引用对象的方式来获取到相应的值。

以下是一个解决方案的例子:

$scope.myNumbers = [ {value: 10}, {value: 20} ];

current scope: {{num.value}}

这样就可以实现输入框的编辑,并且可以通过控制器中的对象数组来获取相应的值。

此外,还可以参考AngularJS的官方文档和相关资料来了解更多关于ngRepeat和ngModel的用法和最佳实践。

参考链接:

- [AngularJS官方文档](https://docs.angularjs.org/guide/forms)

- [Understanding Scopes](https://github.com/angular/angular.js/wiki/Understanding-Scopes)

0
0 Comments

这个问题的出现原因是在早期版本的AngularJS中,使用ngRepeat绑定一个原始数据类型的数组时,无法正确地跟踪和更新每个输入框的值。这会导致在输入框中输入文本时,焦点丢失并导致页面重新渲染。

解决方法是使用AngularJS的版本1.2.0及更高版本中引入的track by功能。通过在ngRepeat指令中添加track by $index,可以确保每个输入框的值被正确地跟踪和更新,从而解决了焦点丢失和页面重新渲染的问题。

以下是解决方法的示例代码:

<div ng-repeat="num in myNumbers track by $index">
  <input type="text" ng-model="myNumbers[$index]">
</div>

在这个示例中,myNumbers是一个原始数据类型的数组。通过在ngRepeat指令中添加track by $index,保证了每个输入框的值能够正确地更新,而不会导致焦点丢失和页面重新渲染。

需要注意的是,官方的AngularJS文档对这个问题的解释相当模糊和混乱,因此使用track by可能并不明显。但是,实际上,使用track by可以帮助解决焦点丢失的问题。

总之,通过在ngRepeat指令中使用track by功能,可以解决在绑定原始数据类型数组时导致焦点丢失和页面重新渲染的问题。这是AngularJS版本1.2.0及更高版本中解决这个问题的方法。

0