Angular JS: Error: [ngRepeat:dupes] with ng-repeat

Question

I am trying to use track by with object which throws above error because I have duplicates key. All I am trying to do is initialised select box with an option.

HTML:

<md-select ng-model="$ctrl.metric">
   <md-option ng-value="opt.value" ng-repeat="opt in $ctrl.obj track by opt.value">
      {{opt.label}}
   </md-option>
</md-select>

JS:

this.obj = {
        label: 'High',
        value: {
          $gte: 0,
          $lte: 2
        }
      },
      {
        label: 'Low',
        value: {
          $gte: 3,
          $lte: 4
        }
      }

this.metric = {
              $gte: 3,
              $lte: 4
            }

Angularjs is probably a little confused with "track by" on a array. Try tracking by obj.label — Xatyrian
– Xatyrian, Commented Jun 15, 2017 at 7:34
Can you format the json. I think there is some issue in here. Also try to use track by index in ng-repeat. Hope you will work. — biswajit-rout
– biswajit-rout, Commented Jun 15, 2017 at 8:03
@Xatyrian track by obj.label will not work since $ctrl.metric does not contain the label property. — user7364438
– user7364438, Commented Jun 15, 2017 at 8:53

user93 · Accepted Answer · 2017-06-15 08:04:13Z

1

It is better to avoid ng-repeat on an object and As Xatyrian pointed out you cannot use track by on array. It is better to use label with track by

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

app.controller('MainCtrl', function() {

  var vm = this;

  vm.obj = [{
      label: 'High',
      value: {
        $gte: 0,
        $lte: 2
      }
    },
    {
      label: 'Low',
      value: {
        $gte: 3,
        $lte: 4
      }
    }
  ]

  vm.metric = {
    $gte: 3,
    $lte: 4
  }


});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl as $ctrl">
  <select ng-model="$ctrl.metric">
      <option ng-value="opt.value" ng-repeat="opt in $ctrl.obj track by opt.label">
      {{opt.label}}
   </option>
</select>

</body>

</html>

answered Jun 15, 2017 at 8:04

user93

1,8705 gold badges27 silver badges46 bronze badges

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

1 Comment

user7364438 Over a year ago

By default should be low, that's is the sole reason to ask the question. Everything is fine.

lacoder · Accepted Answer · 2017-06-15 08:35:01Z

1

Following on from the answer by @User93 It is also possible to use ng-options rather than ng-repeat. Like this:

<body>
<div ng-controller="MainCtrl as $ctrl">
 <select ng-model="$ctrl.metric" ng-options="opt as opt.label for opt in $ctrl.obj"></select>
</div>
</body>

answered Jun 15, 2017 at 8:35

lacoder

1,3331 gold badge11 silver badges27 bronze badges

Collectives™ on Stack Overflow

Angular JS: Error: [ngRepeat:dupes] with ng-repeat

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related