使用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数组。

任何人都可以向我解释为什么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> 

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

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

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

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; 

xox的值是多less?

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

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

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

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

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

我有一个类似的问题(还需要“添加”和“删除”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>