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

Question

我正在使用Angular1.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>