提供在NG-選擇的每個選項的ID值

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}}的ID可能在使用ng-repeat第二個片段。我需要提供一個類似的ID，但使用第一個ng-options方法。

有沒有辦法做到這一點？

Answer 1

目前ng-options只允許您指定使用選擇as或track by語法<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用於執行該功能的選項已經被填充/創建之後。