Question

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

我需要能够在选项的ID属性中添加唯一值（从当前color的{{1}}添加到当前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]
  }

});

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>

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

1 个答案: