How to use ng repeat in angular correctly?

Question

I have old code for a form in angular that contains the following lines:

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

And I want to optimize it using ng repeat (I read that the ng option is better, but I have never used it before ...)

So, in my controller, I added a new variable:

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

And this is my code using ng repeat:

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

But that didn’t work at all, and I got "Error: [ngRepeat: dupes]".

Please tell me how can I use ng repeat here? or ng if you can, and if it is more optimized, repeat ng. thanks!

Answer 1

You are tracking value but not set. This should be language.value .

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

Below you can find the ng-options version:

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

And a working snippet with both examples:

 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

Remove the track by value code.

 <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

If there really are duplicates in your list, the solution will replace track by value with track by $index instead.

However, the correct way to display options is not to use ng-repeat , but to use ng-options instead, which may save you some code. See the docs for more information and examples .

Answer 4

You need the suffix you are tracking with the name indicated in the replay, in this case the language.

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

To use ng-options, which would be better, it would look like this:

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