这是一个
demo我的问题。
$scope.myNumbers = [10,20,30]; <div ng-repeat="num in myNumbers"> <input type="text" ng-model="num"> <div>current scope: {{num}}</div> </div>
任何人都可以向我解释为什么输入不可编辑/只读?如果是按设计,背后的理由是什么?
UPDATE 2/20/2014
看起来这不再是v1.2.0 Demo的问题。但请记住,虽然用户控件现在可以与较新的angularJS版本编辑,它是num属性在子范围,而不是父范围,得到修改。换句话说,修改用户控件中的值不会影响myNumbers数组。
Can anyone explain to me why are the inputs uneditable/readonly? If it’s by design,what’s the rationale behind?
它是设计,as of Angular 1.0.3. Artem有一个very good explanation的如何1.0.3工作,当你“绑定到每个ng重复项目直接” – 即,
<div ng-repeat="num in myNumbers"> <input type="text" ng-model="num">
当您的网页最初呈现时,下面是您的范围的图片(我删除了一个数组元素,所以图片将有更少的框):
虚线显示了原型范围继承。
灰线表示子→父关系(即$ parent引用什么)。
棕色线条显示$$ nextSibling。
灰色框是原始值。
蓝色框是数组。紫色是对象。
注意,我在你的评论中引用的SO答案是写在1.0.3之前出来。在1.0.3之前,ngRepeat子范围中的num值实际上会在您键入到文本框中时发生变化。 (这些值在父作用域中不可见。)自1.0.3以来,ngRepeat在摘要周期内将parentRepeat作用域num值替换为父/ MainCtrl作用域的myNumbers数组中的(未更改)值。这基本上使输入不可编辑。
修复是使用MainCtrl中的对象数组:
$scope.myNumbers = [ {value: 10},{value: 20} ];
然后绑定到ngRepeat中对象的value属性:
<div ng-repeat="num in myNumbers"> <input type="text" ng-model="num.value"> <div>current scope: {{num.value}}</div>