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

Question

我正在使用 Angular 1.3.8。我有一个 select 列表，使用数组作为 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>

Answer 1

一种选择是使用 ngRepeat 语法 (key, value) in expression

(key, value) in expression where key and value can be any user defined identifiers, and expression is the scope expression giving the collection to enumerate.

使用该语法，可以添加键（例如 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>

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

Angular 1.3 - Add Ids to option tags inside ng-options

html

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-options