角度でng repeatを正しく使うには？

Question

私はこれらの行が含まれている角度でフォームの古いコードがあります。

 <label for="language">{{'LANGUAGE_LABEL' | translate}}</label> 
     <select id="language" name="language" ng-model="paramsGEN.lan.paramUserValue"> 
     <option value="en">{{'referencedata.languages.EN' | translate}}</option> 
     <option value="nl">{{'referencedata.languages.NL' | translate}}</option> 
     </select> 

をそして、私はNGリピートを使用して、それを最適化したい（私はNGオプションが優れていることを読んでいたが、私は前に使ったことがありません。..だから）

、私のコントローラでは、私は新しい変数を追加しました：

$scope.languages = [{ 
     name: "referencedata.languages.EN", 
     value: "en" 
    }, { 
     name: "referencedata.languages.NL", 
     value: "nl" 
    }] 

NGとリピートを使用して、この私のコード：

<select id="language" name="language" ng-model="paramsGEN.lan.paramUserValue"> 
<option ng-repeat="language in languages track by value" value="{{language.value}}"> 
{{language.name | translate}} 
</option> 

しかし、それは全く動かず、「エラー：[ngRepeat：dupes]」というメッセージが表示されます。

ここでng repeatを使用するにはどうすればいいですか？可能ならばngオプションを、ng repeatを最適化した場合はngオプションを指定します。 ありがとうございます！

Answer 1

あなたはvalueで追跡しますが、定義されていません。 language.valueである必要があります。あなた以下

<option ng-repeat="language in languages track by language.value" value="{{language.value}}"> 

NG-オプションのバージョンを見つけることができます：あなたはプロパティをサフィックスする必要が

function Main($scope) { 
 
    $scope.languages = [{ 
 
     name: "referencedata.languages.EN", 
 
     value: "en" 
 
    }, { 
 
     name: "referencedata.languages.NL", 
 
     value: "nl" 
 
    }]; 
 
} 
 

 
angular.module('test', []); 
 
angular.module('test') 
 
    .controller('Main', Main);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script> 
 
<div ng-app="test"> 
 
    <div ng-controller="Main"> 
 
    <label for="language">{{'LANGUAGE_LABEL'}}</label> 
 
    <select id="language" name="language" ng-model="paramsGEN.lan.paramUserValue"> 
 
     <option ng-repeat="language in languages track by language.value" value="{{language.value}}"> 
 
     {{language.name}} 
 
     </option> 
 
    </select> 
 
    <hr> 
 
    <select id="language" name="language" ng-model="paramsGEN.lan.paramUserValue" 
 
      ng-options="language.name for language in languages track by language.value"> 
 
    </select> 
 
    </div> 
 
</div>

Answer 2

track by valueコードを削除します。

<select id="language" name="language" ng-model="paramsGEN.lan.paramUserValue"> 
<option ng-repeat="language in languages" value="{{language.value}}"> 
{{language.name | translate}} 
</option> 

Answer 3

あなたのリストが実際に重複がある場合は、解決策ではなくtrack by $indexでtrack by valueを置き換えることであろう。

しかし、オプションを表示する正しい方法はng-repeatを使用するのではなく、代わりにng-optionsを使用することでコードを節約できます。詳細と例についてはSee the docsをご覧ください。

Answer 4

：

<select id="language" name="language" ng-model="paramsGEN.lan.paramUserValue" 
     ng-options="language.name for language in languages track by language.value"> 
</select> 

そして両方の例で働いスニペットを繰り返しで指定された名前でトラッキングしています。このケース言語。

<select id="language" name="language" ng-model="paramsGEN.lan.paramUserValue"> 
<option ng-repeat="language in languages track by language.value" value="{{language.value}}"> 
{{language.name | translate}} 
</option> 

それは次のようになり、より良い選択肢だろうNG-オプション、使用するには：

<select ng-options="language.name | translate for language in languages track by language.value" ng-model="paramsGEN.lan.paramUserValue"></select>