Angular JS：エラー：[ngRepeat：dupes] with ng-repeat

重複キーがあるので上記のエラーをスローするオブジェクトでtrack byを使用しようとしています。私がしようとしているのは、オプション付きの初期化された選択ボックスです。Angular JS：エラー：[ngRepeat：dupes] with ng-repeat

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 
      }

出典

2017-06-15 Anonymous

Angularjsはおそらく配列上の "track by"と混同されます。 obj.labelで追跡してみてください – Xatyrian

jsonをフォーマットできますか？私はここにいくつかの問題があると思う。また、ng-repeatのインデックスでトラックを使用しようとします。あなたが働くことを願っています。 –

これはすでにJSON形式です。 –

オブジェクト上NG-繰り返しを避けるために優れているとXatyrianが指摘したようにあなたは、アレイ上のことで追跡を使用することはできません。 NG-繰り返しではなく、ng-optionsを使用することも可能である User93 @によって答えから、次の

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>

出典

2017-06-15 08:04:13 user93

デフォルトでは、それは低いです、それが質問をする唯一の理由です。すべて順調。 –

でトラックにラベルを上使用することをお勧めします。このように：

<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>

出典

2017-06-15 08:35:01 lacoder

Angular JS：エラー：[ngRepeat：dupes] with ng-repeat

答えて

関連する問題