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 repeat来优化它（我已经读过ng选项更好但我以前从未使用过...）

所以，在我的控制器中，我添加了一个新变量：

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

这是我的代码使用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>

但它根本没用，我得到了＃34;错误：[ngRepeat：dupes]＆＃34;。

请告诉我，我怎么能在这里使用ng重复？或ng选项，如果可以，如果它更优化ng重复。谢谢!!

Answer 1

您按value进行跟踪，但未定义。它应该是language.value。

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

您可以在下面找到ng-options版本：

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

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 value替换为track by $index。

但是，显示选项的正确方法不是使用ng-repeat，而是使用ng-options代替，这可能会为您节省一些代码。 See the docs了解更多信息和示例。

Answer 4

您需要使用重复中指定的名称来跟踪您正在跟踪的属性，在本例中为语言。

<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-options，这将是一个更好的选择，它看起来像：

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

如何在角度中正确使用ng重复？

4 个答案: