ng-repeater 问题不允许在转发器中重复答案

【问题标题】：ng-repeater issue Duplicates in a repeater is not allowedng-repeater 问题不允许在转发器中重复
【发布时间】：2013-10-10 15:57:58
【问题描述】：

我正在尝试创建一个如下所示的表单，这在 Angular 中使用 ng-repeat 指令，每当我创建新行时它都会抱怨 “不允许在转发器中重复。”。

虽然我理解解决此问题的方法是通过“按 $index 进行跟踪”，但它会导致另一个问题，即单击一行上的删除会删除其他字段的值。所以我怀疑按索引跟踪对于静态文本但不是输入表单是可以的。那么如何针对我的情况正确使用 ng-repeat 呢？请参阅我的JSFiddle 进行演示。

我当前的代码：

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);
}

【问题讨论】：

你能检查 $index 是基于 0 还是基于 1。如果 $index 是基于 1 的，那么你需要做 splice(idx-1,1); 否则它应该可以工作。
$index 基于角度始终为 0。看我的 jsfiddle

标签： angularjs angularjs-directive

【解决方案1】：

只需改变你的迭代方式。而不是这个：

<div ng-repeat="item in aliasList track by $index">

这样做：

<div ng-repeat="item in aliasList">

$index 在元素内部仍然可用，像这样使用：

<button ng-click='deleteItem($index)'>Delete</button>

查看此JSFiddle 以获得正确的解决方案

【讨论】：

【解决方案2】：

您的方法存在多个问题。

由于您直接将字符串绑定到 ng-model 并且 ng-repeat 创建了一个子范围，因此对值的任何更改都不会反映回来。将您的范围模型更改为类似

$scope.list = [{text:"one"},{text:"two"}];

并绑定到i.text，而不是像之前那样绑定到i。

deleteItem 方法是使用项目而不是索引调用的。在这里看我的小提琴

http://jsfiddle.net/JS6aJ/1/

【讨论】：