3

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

在此处输入图像描述

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

我的 jsfiddle：演示。

编辑：我知道对象的 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);
}
4

3 回答 3

6

我猜这是当列表中有多个空字符串时引起的。

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

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

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

并调整您的模板：

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

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

请参阅实现过滤器以将模型转换回字符串列表的小提琴。

于 2013-10-10T07:40:14.133 回答
2

当您输入一个新的 createdinput时，您list保持不变。任何更改的 Angularlist都会更新视图 ( ng-repeat) 并删除所有新存储的文本。因此，我们需要添加ng-change以更新我们list的任何input更改

添加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-10T07:45:06.217 回答
0

是的，推送多个空字符串会导致 ng-repeat 抱怨。

此外，您还可以尝试：

  if ($scope.aliasList.indexOf(VALUE_TO_ADD) === -1) {
      ...
  }
于 2013-10-10T07:56:12.943 回答