中继器中的副本是不允许的角度

我试图创建一个像下面这样的形式，这在角度中使用ng-repeat指令，并且每当我创建一个新行时，都会抱怨 “不允许在中继器中复制。。中继器中的副本是不允许的角度

enter image description here

虽然我知道这种情况的解决方案是通过将"track by $index"，但它会导致另一个问题，其点击删除一行删除其他字段的值。所以我怀疑，通过索引进行追踪对于静态文本而言是可以的，但对于输入形式来说是不错那么如何正确使用ng-repeat来处理我的情况呢？

我的jsfiddle：demo.

编辑：我知道对象的JSON数组将解决我的问题（因为对象的角度创建$$ hashKey），并已经实现了这个对于大多数我的其他模块。但我实际上期待一些可以在不改变我的json字符串数组的情况下完成的修复。对不起，不清楚。

我当前的代码：

HTML

<div class="row-fluid spacer10"> 
    <a ng-click="addAKA()" class="btn btn-primary spacer5 left30"><i class="icon-plus icon-white"></i> Add New Alias</a> 
</div> 
<div class="row-fluid spacer10"></div> 
<div class="row-fluid spacer5" ng-repeat="item in aliasList track by $index"> 
    <input type="text" class="span6 left30" ng-model="item"> 
    <button class="btn btn-danger" ng-click="deleteAKA($index)">delete</button> 
    <BR/> 
</div>

的Javascript

$scope.addAKA = function() 
{ 
    if($scope.aliasList == null) 
    { 
     $scope.aliasList = []; 
    } 
    $scope.aliasList.push(""); 
    $scope.aliasjson = JSON.stringify($scope.aliasList); 
} 


$scope.deleteAKA = function (idx) 
{ 
    var aka_to_delete = $scope.aliasList[idx]; 
    $scope.aliasList.splice(idx, 1); 
    $scope.aliasjson = JSON.stringify($scope.aliasList); 
}

来源

2013-10-10 Rudy

当有列表中的一个以上的空字符串我想这是造成的。

如果是这种情况，它是由于任何两个空字符串在JS中是相等的而Angular repeater不允许重复值（如消息中明确指出的）引起的。这是一个有效的决定，因为他们必须将列表中的对象与其DOM树关联起来，以尽量减少DOM操作。

一个解决办法是插入包含在模型中的字符串简单对象：

$scope.addAKA = function() { 
    ... 
    $scope.aliasList.push({value:""}); 
    ... 
};

，并调整您的模板：

<input type="text" class="span6 left30" ng-model="item.value">

因为所有新的对象是不同的，你的问题应该得到解决。

看到一个fiddle其中一个过滤器实现的模型转换回字符串列表。

来源

2013-10-10 07:40:14

实际上2空字符串问题可以通过跟踪由指数来解决。但它创造了另一个问题，即通过索引删除不再工作。 – Rudy

是的，在小提琴中（参见编辑）我没有使用'$ index'，但是我提到的对象方法。 –

当您键入新创建的input时，您的list保持不变。对任何list更改将更新视图（ng-repeat）并删除所有新存储的文本。因此，我们需要添加ng-change在任何input变化

更新我们的list添加ng-change="change(i, $index)到您的项目，它应该工作

HTML

<div ng-controller='ctrl'> 
    <ol> 
     <li ng-repeat='i in list track by $index'> 
      <input type='text' ng-model='i' ng-change="change(i, $index)"></input> 
      <button ng-click='deleteItem($index)'>Delete</button> 

     </li> 
    </ol> 
    <button ng-click='addItem()'>Add</button> 
    <div>ITEM: {{list | json}}</div> 
</div>

的Javascript

angular.module("app", []).controller("ctrl", function ($scope) { 
    $scope.list = ["one","two"]; 

    $scope.addItem = function() 
    { 
     $scope.list.push(""); 
    }; 

    $scope.deleteItem = function (idx) 
    { 
     var item_to_delete = $scope.list[idx]; 
     $scope.list.splice(idx, 1); 
    }; 

    $scope.change = function (item, idx) 
    { 
     $scope.list[idx] = item; 
    }; 

});

看到DEMO

来源

2013-10-10 07:45:06

@Rudy请看我的修复，它应该如预期的那样工作 –

感谢那个巧妙的把戏：“item in item track by $ index” – joeriks

是固定的演示，推不止一个空字符串会导致NG重复抱怨。

此外，你还可以尝试：

if ($scope.aliasList.indexOf(VALUE_TO_ADD) === -1) { 
     ... 
    }

来源

2013-10-10 07:56:12 Tone

中继器中的副本是不允许的角度

回答

相关问题