ng-repeat issue不允许在转发器中使用重复项

时间:2013-10-10 07:14:25

标签: angularjs angularjs-directive

我正在尝试创建一个如下所示的表单,这是使用角度的ng-repeat指令,每当我创建一个新行时就会抱怨 “不允许在转发器中复制。”

enter image description here

虽然我理解这个问题的解决方案是通过“追踪$ 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);
}

2 个答案:

答案 0 :(得分: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以获取正确的解决方案

答案 1 :(得分:0)

您的方法存在多个问题。

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

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

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

使用item而不是index调用deleteItem方法。看到我的小提琴

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