angularjs - 转发器中的重复项不允许有 Angular

Question

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

虽然我知道解决方案是把 "track by $index" ，但是它会导致另一个问题，即单击一行上的删除会删除其他字段的值。所以我怀疑按索引跟踪对于静态文本但不是输入表单是可以的。那么如何在我的情况下正确使用 ng-repeat 呢？

我的 jsfiddle : demo.

编辑:我知道对象的 json 数组将解决我的问题(因为对象 Angular 创建 $$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);
}

Answer 1

我猜这是由于列表中有多个空字符串造成的。

如果是这种情况，是因为在 JS 中任意两个空字符串都相等，并且 Angular 中继器不允许重复值(如消息中明确说明的那样)。这是一个有效的决定，因为他们必须将列表中的对象与其 DOM 树关联起来，以最大限度地减少 DOM 操作。

解决方案是在模型中插入包含字符串的简单对象:

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

并调整您的模板:

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

由于所有新对象都不同，因此您的问题应该得到解决。

---

查看 fiddle其中实现了一个过滤器以将模型转换回字符串列表。