CODEWITHSUNDEEP
angularjsangularjs-directive
Rudy
Rudy

Reputation: 7044

ng-repeater issue Duplicates in a repeater is not allowed

I'm trying to create a form like below, this using ng-repeat directive in angular and it whenever I created a new row complains "Duplicates in a repeater are not allowed.".

enter image description here

While I understand the solution for this is by putting "track by $index", however it causes another issue, which clicking delete on one row deletes the value of other field. So I suspect that track by index is OK for static text but not input form. So how to use ng-repeat correctly for my case? See my JSFiddle for demo.

My current code :

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

Upvotes: 0

Views: 319

Answers (2)

Chandermani
Chandermani

Reputation: 42669

There are multiple problems with your approach.

Since you are directly binding a string to ng-model and ng-repeat creates a child scope, any change to the value would not reflect back. Change you scope model to something like

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

and bind to i.text instead of binding to i as you did earlier.

The deleteItem method was called using item instead of index. See my fiddle here

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

Upvotes: 0

Eugenio Cuevas
Eugenio Cuevas

Reputation: 11078

Just change the way you iterate. Instead of this:

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

do this:

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

$index will be still available inside the element, use like this:

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

See this JSFiddle for a correct solution

Upvotes: 1

Related Questions