html - 将动态 id 添加到 ng-options 中的选项

Question

是否可以添加动态属性id到option ，当我使用ng-options时在 select循环我的列表并生成我的下拉列表？如果我使用ng-repeat，它就可以工作。循环，因为我可以在那里放置属性 id直接在 option用 $index 标记增量。 ng-options 也可以吗？ ？这是我的代码:

angular.module("myApp", []).controller("myController", function($scope) {
  $scope.selectedOption1;
  $scope.selectedOption2;

  $scope.myList = [{
    text: "1"
  }, {
    text: "2"
  }, {
    text: "3"
  }, {
    text: "4"
  }, {
    text: "5"
  }, ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myController">
  <!--BUILD DROPDOWN WITH NG-OPTIONS LOOP-->
  <select ng-model="selectedOption" ng-options="option as option.text for option in myList"></select>

  <!--BUILD DROPDOWN AND SET ATTRIBUT ID WITH NG-REPEAT LOOP-->
  <select ng-model="selectedOption2">
    <option id="option_{{$index}}" ng-repeat="option in myList">{{option.text}}</option>
  </select>
</div>

两者的屏幕截图 select (红色边框是 ID):

有什么想法吗？谢谢。

Answer 1

您可以使用跟踪选项:

<select ng-model="selectedOption" ng-options="obj.text for obj in myList track by obj.value">

但是，你必须稍微修改一下你的对象:

$scope.myList = [{
    text: "1",
    value: "option_1"
}, {
    text: "2",
    value: "option_2"
}, {
    text: "3",
    value: "option_3"
}, {
    text: "4",
    value: "option_4"
}, {
    text: "5",
    value: "option_5"
}, ];

这应该可以解决问题。

编辑 The plunker to test it

编辑2对于那些想要快速回答的人，您也可以这样做:

<select ng-model="selectedOption" ng-options="obj.text for obj in myList track by option + obj.text">

并在js文件中添加:

$scope.option = 'option_';
$scope.myList = [{
    text: "1"
}, {
    text: "2"
}, {
    text: "3"
}, {
    text: "4"
}, {
    text: "5"
}, ];