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

Question

我有一个 select 盒子，看起来像这样：

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

其中 ctrl.myarray 看起来像：

ctrl.myarray = [100, 200, 700, 900];

这一切都很好，但出于自动化测试的目的，我需要为每个动态生成的选项提供一个 ID。因此，例如，如果我使用 ng-repeat 重写它，那么我将需要这样的东西：

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

请注意在第二个代码段中可能使用 ng-repeat 的 array-{{option}} id。我需要提供一个类似的 ID，但使用第一个 ng-options 方法。

有办法吗？

Answer 1

目前 ng-options 仅允许您使用 select as 或 [=14] 指定 <option> 元素的 value 属性 =] 语法。如果您的数据源是对象（不是数组），也可以添加 disabled 属性。无法进一步自定义 <option> 元素的字段，包括 id.

Docs on ngOptions

Answer 2

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

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用于执行选项populated/created后的函数。

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

Providing id values for each option in ng-options

select

angularjs

ng-options