使用ngRepeat =>不可编辑的input将input绑定到一系列基元

这是我的问题的演示 。

$scope.myNumbers = [10, 20, 30]; <div ng-repeat="num in myNumbers">   <input type="text" ng-model="num">   <div>current scope: {{num}}</div> </div> 

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

更新2/20/2014

看起来这不再是v1.2.0 + Demo的问题。 但请记住，尽pipe用户控件现在可以使用更新的angularJS版本进行编辑，但它是子范围中的num属性，而不是父范围，它被修改。 换句话说，修改用户控件中的值不会影响myNumbers数组。

Answer 1

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

它是由devise， 如angular1.0.3 。 当你“直接绑定到每个ng-repeat项目”时，Artem对于1.0.3+是如何工作的有非常好的解释 – 也就是说，

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

当您的页面最初呈现时，这里是您的范围的图片（我删除了一个数组元素，所以图片将有更less的框）：

^{（点击放大）}

虚线表示原型范围inheritance。
灰线显示孩子→父母关系（即， $parent引用）。
棕色线条显示$$ nextSibling。
灰色框是原始值。 蓝色框是数组。 紫色是物体。

请注意，在注释中引用的我的SO答案是在1.0.3之前写出来的。 在1.0.3之前，当你input文本框时，ngRepeat子范围中的num值实际上会改变。 （这些值在父范围内是不可见的。）从1.0.3开始，ngRepeat现在会在摘要循环中用来自父/ MainCtrl作用域的myNumbers数组的（不变的）值replacengRepeat作用域num值。 这基本上使投入不可避免。

解决的办法是在你的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> 

Answer 2

现在，AngularJS的更新版本已经解决了这个问题，通过track byfunction允许基站上的中继器：

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

每次击键后页面都不会重新绘制，解决了焦点丢失的问题。 官方的AngularJS文档对此非常模糊和混淆。

Answer 3

ngRepeat使用对源数组的引用 。 由于integer (Number in js)是一个值types，而不是一个引用types，因此不能通过在JavaScript引用传递。 改变将不会被传播。

这是一个示范：

  var x = 10; var ox = {value:10}; var y = x; var oy = ox; y = 15 oy.value = 15; 

x和ox的值是多less？

 >> x = 10; >> y = 15; >> ox = {value:15}; >> oy = {value:15}; 

所有javascript对象都是通过引用传递的，所有的原语都通过value [“string”，“number”等等）来传递。

工作plunker http://plnkr.co/edit/7uG2IvAdC2sAEHbdHG58

Answer 4

似乎Angular无法写入模式定义的方式。 使用引用初始$ scope属性来让它绑定值的方式：

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

Answer 5

我有一个类似的问题（还需要“添加”和“删除”function），并解决了这样的问题：

 $scope.topics = ['']; $scope.removeTopic = function(i) { $scope.topics.splice(i, 1); } <div ng-repeat="s in topics track by $index"> <input ng-model="$parent.topics[$index]" type="text"> <a ng-click="removeTopic($index)">Remove</a> </div> <a ng-click="topics.push('new topic')">Add</a>