使用绑定输入原语的数组ng​​Repeat =＆GT;不可编辑输入 [英] Binding inputs to an array of primitives using ngRepeat => uneditable inputs

问题描述

下面是一个演示我的问题。

  $ scope.myNumbers = [10，20，30]。＆LT; D​​IV NG重复=NUM在通过myNumbers＆GT;
＆LT;输入类型=文本NG模型=NUM＆GT;
＆LT; D​​IV＆GT;电流范围：{{NUM}}＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

任何人都可以向我解释为什么输入不可编辑/只读？如果它的设计，什么是背后的理由？

更新2014年2月20日

它看起来像这样已不再是V1.2.0问题+ 演示。但千万记住，虽然用户控件是现在较新的angularJS版本的编辑，这是在的子作用域 NUM 属性> ，不是父范围，即得到修改。换句话说，在用户控件修改值不影响通过myNumbers 阵列

解决方案

  

任何人都可以向我解释为什么输入不可编辑/只读？如果它的设计，什么是背后的理由？

这是由设计，如角1.0.3 的。阿尔乔姆有很好解释的如何1.0.3+的作品，当你绑定到直接在每个NG-重复项＆ndash的;即，

 ＆LT; D​​IV NG重复=NUM在通过myNumbers＆GT;
  ＆LT;输入类型=文本NG模型=NUM＆GT;
 

在你的页面呈现最初，这里是你的范围的照片（我删除数组元素之一，所以画面将有更少的框）：

^{（点击放大）的}

虚线表示原型范围继承。结果
灰线显示的孩子和RARR;父母的关系（即，什么 $父引用）。结果
布朗线显示$$ nextSibling。结果
灰色框是原始值。
蓝盒子是数组。紫色是对象。

请注意，您在评论中引用矿的SO答案写之前1.0.3出来了。 1.0.3之前，在ngRepeat子作用域NUM 值实际上，当你键入到文本框更改。 （父范围，这些值将不可见的。）由于1.0.3，现在ngRepeat替换ngRepeat范围 NUM 从父/ MainCtrl的（不变）值的值摘要周期范围的通过myNumbers 阵列。这实际上使得输入编辑。

解决方法是使用对象的数组在MainCtrl：

  $ scope.myNumbers = [{值：10}，{值：20}];
 

，然后绑定到值在ngRepeat对象的属性：

 ＆LT; D​​IV NG重复=NUM在通过myNumbers＆GT;
  ＆LT;输入类型=文本NG模型=num.value＆GT;
  ＆LT; D​​IV＆GT;电流范围：{{num.value}}＆LT; / DIV＆GT;
 

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.

解决方案

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

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):

^{(click to enlarge)}

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>

这篇关于使用绑定输入原语的数组ng​​Repeat =＆GT;不可编辑输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！