Angularjs 为ng选项中的每个选项提供id值

我有一个如下所示的选择框：

 <select ng-model="ctrl.arrayVal" ng-options="option for option in ctrl.myarray"></select>

<select ng-model="ctrl.arrayVal"> 
   <option id="array-{{option}}" ng-repeat="option in ctrl.myarray" value="{{option}}">{{option}}</option>
</select>

这一切都很好，但出于自动化测试的目的，我需要为每个动态生成的选项提供一个id。因此，例如，如果我使用

ng repeat

重写此代码，则我需要如下内容：

 <select ng-model="ctrl.arrayVal" ng-options="option for option in ctrl.myarray"></select>

<select ng-model="ctrl.arrayVal"> 
   <option id="array-{{option}}" ng-repeat="option in ctrl.myarray" value="{{option}}">{{option}}</option>
</select>

{{option}}

请注意

array-{{option}}

id，在第二个代码段中可以使用

ng repeat

。我需要提供一个类似的id，但使用第一个

ng options

方法

---

有什么方法可以做到这一点吗？

目前

ng options

仅允许您使用select

as

或

track by

语法指定

元素的

值

属性。如果数据源是对象（不是数组），也可以添加

disabled

属性。无法进一步自定义

元素的字段，包括

id

---

也许您可以通过自定义指令实现您的目标。例如：

angular.module('myApp', [])
.directive('idAdder', function() {
  return {

    link: function(scope, element, attrs) {
      scope.$watch(attrs.ngModel, function() {
        scope.$evalAsync(function() {
          angular.forEach(element.find('option'), function(o, k) {
            o.id = o.value;
          });
        });
      });
    }
  }
});

然后，将其用作自定义属性：

 <select ng-model="ctrl.arrayVal" 
         ng-options="option for option in ctrl.myarray"
         id-adder></select>

填充/创建选项后，

$watch

和

$evalAsync

用于执行该功能