Проблема с n-репитером Дубликаты в ретрансляторе не допускаются

Question

Я пытаюсь создать форму, как показано ниже, используя директиву ng-repeat в угловом формате, и каждый раз, когда я создавал новую строку, жалуется «Дубликаты в ретрансляторе не являются позволил.".

Хотя я понимаю, что решение это, поставив «трек $ индекса», однако это вызывает еще один вопрос, который нажав удалить на одной строке удаляет значение другого поля. Поэтому я подозреваю, что трек по индексу подходит для статического текста, но не для ввода формы. Итак, как правильно использовать 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); 
} 

Answer 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 для правильного решения

Answer 2

Существует множество проблем с вашим подходом.

Поскольку вы напрямую привязываете строку к ng-модели, а ng-repeat создает дочернюю область, любое изменение значения не отразится на обратном. Изменение вам модель области видимости на что-то вроде

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

и связываются с i.text вместо привязки к i, как вы это делали раньше.

Метод deleteItem вызывается с использованием элемента вместо индекса. Смотрите мою скрипку здесь

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