Question

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

 <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>

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

有办法做到这一点吗？

Answer 1

目前ng-options只允许您使用select value或<option>语法指定as元素的track by属性。如果数据源是对象（不是数组），也可以添加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用于执行该功能。

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

2 个答案: