Angular 1.3 - 将 ID 添加到 ng-options 中的选项标签

Question

我正在使用 Angular 1.3.8。我有一个使用数组作为 ngOptions 选项的选择列表，语法包括基本的track by 表达式。

当ng-options 创建选项标签时，我需要能够向选项的 ID 属性添加唯一值（从当前 color 的 description 到当前 <option> 元素。有没有有什么办法吗？如果不行，我可以用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>

Answer 1

一种选择是使用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>