如何在角度中正確使用ng重複？

我對角形式包含這些行的舊代碼：如何在角度中正確使用ng重複？

 <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重來優化它（我閱讀過納克選項是更好，但我從來沒有使用過.. 。）

所以，在我的控制，我添加了一個新的變量：

$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重複這裏？或ng選項（如果可以的話）以及它是否更優化以便重複。謝謝！

來源

2016-11-15 salamanka44

的'ngRepeat：dupes'錯誤，您越來越似乎與您發佈的代碼不一致。 –

請在這裏閱讀：https://docs.angularjs.org/error/ngRepeat/dupes –

您跟蹤value但它沒有定義。它應該是language.value。

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

下面你可以找到NG選項版本：

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

和工作片段與兩個例子：

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>

來源

2016-11-15 14:35:37 gyc

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

來源

2016-11-15 14:21:36 driconmax

你能解釋一下爲什麼要刪除'track by'應該能解決他的問題嗎？ –

1 - 追蹤第一次運行後永不改變的東西是沒用的。 – driconmax

2 - 「按價值劃分」不好。這是'語言跟蹤價值' – driconmax

如果列表確實有重複，該解決方案將與track by $index而不是取代track by value。

但是，顯示選項的正確方法不是使用ng-repeat，而是使用ng-options代替，這可能會爲您節省一些代碼。 See the docs欲瞭解更多信息和示例。

來源

2016-11-15 14:26:39 lucasnadalutti

我必須失明，重複的地方在哪裏？ – DoctorMick

OP說：「但它根本不起作用，我得到了」錯誤：[ngRepeat：dupes]「。」 – lucasnadalutti

他添加了他的數據，但沒有重複，因此我不確定要假設什麼。 – lucasnadalutti

您需要後綴屬性你正在使用重複中指定的名稱進行跟蹤，這種情況下的語言。

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

來源

2016-11-15 14:39:47 DoctorMick

如何在角度中正確使用ng重複？

回答

相關問題