angularjs – 使用ngRepeat =>不可编辑的输入绑定到图元数组的输入

前端之家收集整理的这篇文章主要介绍了angularjs – 使用ngRepeat =>不可编辑的输入绑定到图元数组的输入前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是一个 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>

猜你在找的Angularjs相关文章