Angular 1.3 — добавить идентификаторы в теги параметров внутри ng-options

Я использую Angular 1.3.8. У меня есть список выбора, использующий массив в качестве параметров с ngOptions, а синтаксис включает базовое выражение track by.

Мне нужно иметь возможность добавлять уникальные значения в атрибут ID параметров (от текущего элемента color description до текущего элемента <option>, когда ng-options создает теги параметров. Есть ли способ сделать это? Если нет, могу ли я использовать ng-repeat Я пробовал ng-repeat безуспешно.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.colors = [{
    "code": "GR",
    "description": "Green"
  }, {
    "code": "RE",
    "description": "Red"
  }, {
    "code": "CY",
    "description": "Cyan"
  }, {
    "code": "MG",
    "description": "Magenta"
  }, {
    "code": "BL",
    "description": "Blue"
  }];

  // Preselect CYAN as default value
  $scope.data = {
    colorType: $scope.colors[2]
  }

});
<script src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<div ng-app="plunker">
  <div ng-controller="MainCtrl">
    <strong>ng-options: </strong><select name="color" id="colors" ng-model="data.colorType" ng-options="color as color.description for color in colors track by color.code"></select>
<strong>ng-repeat: </strong><select name="color" id="colors" ng-model="data.colorType">
	<option ng-repeat="color in colors" value="{{color}}">{{color.description}}</option>
</select>
    <pre>{{ data | json }}</pre>
  </div>
</div>


javascript html angularjs angularjs-ng-repeat angularjs-ng-options
person red    schedule 12.04.2017    source источник
comment
Зачем вам нужны идентификаторы на <option> в угловом приложении?   -  person charlietfl    schedule 12.04.2017
comment
Тестировщики @charlietfl требуют этого :\   -  person red    schedule 12.04.2017

Ответы (1)


arrow_upward
1
arrow_downward

Один из вариантов — использовать ngRepeat с синтаксисом (key, value) in expression

(key, value) in expression, где key и value могут быть любыми идентификаторами, определенными пользователем, а expression — это выражение области действия, задающее коллекцию для перечисления.

Используя этот синтаксис, можно добавить ключ (например, index):

<option ng-repeat="(index, color) in colors" value="{{color}}" id="option_{{index}}">{{color.description}}</option>

См. это продемонстрировано ниже. Проверка параметров должна выявить набор атрибутов id (например, option_0, option_1 и т. д.).

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.colors = [{
    "code": "GR",
    "description": "Green"
  }, {
    "code": "RE",
    "description": "Red"
  }, {
    "code": "CY",
    "description": "Cyan"
  }, {
    "code": "MG",
    "description": "Magenta"
  }, {
    "code": "BL",
    "description": "Blue"
  }];

  // Preselect CYAN as default value
  $scope.data = {
    colorType: $scope.colors[2]
  }

});
<script src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
<div ng-app="plunker">
  <div ng-controller="MainCtrl">        
<strong>ng-repeat: </strong><select name="color" id="colors" ng-model="data.colorType">
	<option ng-repeat="(index, color) in colors" value="{{color}}" id="option_{{index}}">{{color.description}}</option>
</select>
    <pre>{{ data | json }}</pre>
  </div>
</div>

person Sᴀᴍ Onᴇᴌᴀ    schedule 12.04.2017
comment
О, аккуратно, я вижу. Но теперь "colorType": "{\"code\":\"CY\",\"description\":\"Cyan\"}" не устанавливает по умолчанию значение cyan. - person red; 12.04.2017
comment
Выяснил, что могу использовать директиву ng-selected. - person red; 12.04.2017