AngularJS duplicate rows error

Question

When I want to add the same information it warm me an error of duplicates row.

This problem it comes from $scope.showSal and ng-repeat="rows in showSal".

If I use ng-repeat="rows in showSal track by $index" I can not add duplicate rows and I need it.

How I can make to parse and add duplicates? I tried to make JSON data, but it take error even I use stringify and parse method... maybe I doesn't implemented too well the parsing...

PS: I need to parse an array of objects.

HTML file:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Research project</title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="js/app/research.js"></script>
    </head>
    <body ng-app="testApp" ng-controller="mainCtrl">
        <table>
            <thead>
                <tr>
                    <th>Nr.</th>
                    <th>An</th>
                    <th>Den</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="rows in showSal">
                    <td>{{rows.id}}</td>
                    <td>{{rows.an}}</td>
                    <td>{{rows.den}}</td>
                </tr>
            </tbody>
        </table>

        <form id="add-content" ng-controller="addInfoCtrl" ng-submit="addInfoDb()">
                <br/>
                <div class="controls">
                        <button type="submit" style="width: 220px;">Adauga salariu</button>
                </div>
        </form>
    </body>
</html>

JavaScript file:

var app = angular.module("testApp", []);

app.controller('mainCtrl', ['$scope', '$sce', '$document', function($scope, $sce, $document) {  
    $scope.showSal = [
        { id: '1', an: '2016', den: 'Oracle' },
        { id: '2', an: '2016', den: 'Oracle' }
    ];
}]);

app.controller('addInfoCtrl', ['$scope', function($scope) { 
    $scope.testAdd = { id: '100', an: '2016', den: 'Oracle' }

    $scope.addInfoDb = function() {
        $scope.showSal.push($scope.testAdd);
        console.log($scope.showSal.length);
    }
}]);

You should use track by $index and in your add function, you need to actually create a duplicate object, maybe like angular.copy( objToCopy ) — jusopi
– jusopi, Commented Jul 27, 2016 at 17:06
using track by $index work just fine jsbin.com/vufidedoti/edit?html,js,output — jusopi
– jusopi, Commented Jul 27, 2016 at 17:11

underscore · Accepted Answer · 2016-07-27 17:06:17Z

1

Error: ngRepeat:dupes Duplicate Key in Repeater

Add track by $index

ng-repeat="rows in showSal track by $index"

Doc

answered Jul 27, 2016 at 17:06

underscore

6,9277 gold badges44 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Doro Over a year ago

The project is bigger of that I posted here and with 'track by $index' it wasn't worked.... I don't know why... but with @Yuva Raj solution it works very good.

Harris Over a year ago

@Doro This really is a better answer than the one you picked. The angular.copy() function makes a deep copy of whatever you're passing, which is expensive for both memory and time efficiency. track by $index simply specifies an alternate distinguisher during the ng-repeat iteration, and throws in some extra accessibility for free. If track by $index isn't working for you, you probably messed up the usage and should fix it, rather than going with a notably less efficient route.

Doro Over a year ago

Human error.... very big error :) ... I was altering another ng-repeat tag and, of course, it couldn't have how to solve the problem :)

Yuva Raj · Accepted Answer · 2016-07-27 17:11:57Z

0

Replace,

    $scope.showSal.push($scope.testAdd);

to,

    $scope.showSal.push(angular.copy($scope.testAdd));

Here's the working FIDDLE

answered Jul 27, 2016 at 17:11

Yuva Raj

3,8811 gold badge21 silver badges30 bronze badges

Collectives™ on Stack Overflow

AngularJS duplicate rows error

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related