Jak poprawnie używać ng repeat w kanciastym?

Question

mam stary kod w formie kątowej, która zawiera następujące wiersze:

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

I chcę, aby zoptymalizować go za pomocą powtórki ng (Czytałem, że opcja NG jest lepiej, ale nigdy nie używane przed .. .)

Tak, w moim kontrolera, dodałem nową zmienną:

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

a to mój kod z użyciem ng Powtarzam:

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

Ale to nie zadziałało i otrzymałem komunikat "Błąd: [ngRepeat: dupes]".

Czy możesz mi powiedzieć proszę, w jaki sposób mogę użyć tutaj powtórzenia? lub ng opcja, jeśli możesz i jeśli jest bardziej zoptymalizowany, aby powtórzyć. dziękuję !!

Answer 1

Śledzone przez value, ale nie jest zdefiniowane. Powinno to być language.value.

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

Poniżej znajdziesz wersję NG-opcje:

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

oraz fragment pracy z obu przykładów:

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

Usuń kod 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

Jeśli lista rzeczywiście ma duplikatów, rozwiązaniem byłoby zastąpienie track by value z track by $index zamiast.

Jednak prawidłowym sposobem wyświetlania opcji nie jest użycie ng-repeat, ale użycie zamiast tego ng-options, co może zaoszczędzić ci trochę kodu. See the docs, aby uzyskać więcej informacji i przykładów.

Answer 4

Musisz sufiks własność śledzisz przy użyciu nazwy określonej w powtórzeniu, w tym przypadku język.

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

Aby korzystać NG-opcji, co byłoby lepszym rozwiązaniem będzie wyglądać:

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