Error coming up while using ng-repeat for a array in javascript

Question

I am stuck at this issue while running my code

<div ng-model="activeFilterCtrl.selectedfilters" ng-repeat="filters in activeFilterCtrl.selectedfilters" ng-model-options="{trackBy: '$value.params'}" flex>
      <md-button name="mylabel" ng-click="activeFilterCtrl.clearvalue()">{{filters.params}}</md-button>
</div>

I keep getting this error.

 Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: filters in activeFilterCtrl.selectedfilters, Duplicate key: string:a, Duplicate value: a

Please provide the solution Following is the value of selected filter

selected filter value is [{"params":"min","value":5}, {"params":"max","value":30}]

The message explicitly says "Use 'track by' expression to specify unique keys". Also this question has been asked many times before. Please search before asking. — str, Jul 11 '16 at 08:30
Possible duplicate of [Angular ng-repeat Error "Duplicates in a repeater are not allowed."](http://stackoverflow.com/questions/16296670/angular-ng-repeat-error-duplicates-in-a-repeater-are-not-allowed) — str, Jul 11 '16 at 08:31
i got that it was a duplicate but by using track by $index error is removed and data is still not shown — Manak Bhardwaj, Jul 11 '16 at 11:14

score 1 · Answer 1 · answered Jul 11 '16 at 08:28

1

try with this

 ng-repeat="filters in activeFilterCtrl.selectedfilters track by $index"

answered Jul 11 '16 at 08:28

Sa E Chowdary

2,075
15
31

score 1 · Answer 2 · edited Jul 11 '16 at 08:41

Try this Demo Link

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js@1.4.x"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="plunker" ng-controller="MainCtrl as activeFilterCtrl">
  <div ng-model="activeFilterCtrl.selectedfilters" ng-repeat="filters in activeFilterCtrl.selectedfilters" ng-model-options="{trackBy: '$value.params'}" flex>
      <md-button name="mylabel" ng-click="activeFilterCtrl.clearvalue()">{{filters.params}}</md-button>
</div>
  </body>

</html>

JS

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  var vm = this;

  vm.selectedfilters = [{"params":"min","value":5}, {"params":"max","value":30}]
});

Error coming up while using ng-repeat for a array in javascript

2 Answers2