使用ngRepeat =& gt;将输入绑定到原始数​​组.不可编辑的输入

问题描述

这是我的问题的

虚线表示原型作用域继承.
灰线表示孩子→父级关系(即 $ parent 引用的内容).
棕线表示$$ nextSibling.
灰色框是原始值.蓝色框是数组.紫色是物体.

请注意，您在注释中引用的我的SO答案是在1.0.3发布之前编写的.在1.0.3之前的版本中，当您在文本框中键入内容时，ngRepeat子作用域中的 num 值实际上会发生变化.(这些值在父范围中将不可见.)从1.0.3开始，ngRepeat现在将ngRepeat范围 num 值替换为父/MainCtrl范围的 myNumbers 数组在摘要周期中.这实质上使输入不可编辑.

解决方法是在MainCtrl中使用对象数组:

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

，然后绑定到ngRepeat中对象的 value 属性:

 < div ng-repeat ="myNumbers中的数字">< input type ="text" ng-model ="num.value">< div>当前范围:{{num.value}}</div> 

Here is a demo to my problem.

$scope.myNumbers = [10, 20, 30];

<div ng-repeat="num in myNumbers">
    <input type="text" ng-model="num">
    <div>current scope: {{num}}</div>
</div>

Can anyone explain to me why are the inputs uneditable/readonly? If it's by design, what's the rationale behind?

UPDATE 2/20/2014

It looks like this is no longer an issue for v1.2.0+ Demo. But do keep in mind that although the user controls are now editable with the newer angularJS versions, it is the num property in the child scopes, not the parent scope, that get modified. In another words, modifying the values in the user controls does not affect the myNumbers array.

解决方案

It is by design, as of Angular 1.0.3. Artem has a very good explanation of how 1.0.3+ works when you "bind to each ng-repeat item directly" – i.e.,

<div ng-repeat="num in myNumbers">
  <input type="text" ng-model="num">

When your page initially renders, here's a picture of your scopes (I removed one of the array elements, so the picture would have fewer boxes):

Dashed lines show prototypical scope inheritance.
Gray lines show child → parent relationships (i.e., what $parent references).
Brown lines show $$nextSibling.
Gray boxes are primitive values.Blue boxes are arrays. Purple are objects.

Note that the SO answer of mine that you referenced in a comment was written before 1.0.3 came out. Before 1.0.3, the num values in the ngRepeat child scopes would actually change when you typed into the text boxes. (These values would not be visible in the parent scope.) Since 1.0.3, ngRepeat now replaces the ngRepeat scope num values with the (unchanged) values from the parent/MainCtrl scope's myNumbers array during a digest cycle. This essentially makes the inputs uneditable.

The fix is to use an array of objects in your MainCtrl:

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

and then bind to the value property of the object in the ngRepeat:

<div ng-repeat="num in myNumbers">
  <input type="text" ng-model="num.value">
  <div>current scope: {{num.value}}</div>

这篇关于使用ngRepeat =& gt;将输入绑定到原始数​​组.不可编辑的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！