为具有简单数组的ng-options的模型添加索引

And*_*hev 1 html javascript angularjs angularjs-directive

对于以下代码(请参阅小提琴):

HTML:

<div ng-app ng-controller="MyCtrl">
    <select ng-model="ampm" ng-options="currOption for currOption in ['AM', 'PM']"></select>
    AM/PM: {{ampm}}
</div>
Run Code Online (Sandbox Code Playgroud)

JS:

function MyCtrl($scope) {
    $scope.ampm = "AM";
} 
Run Code Online (Sandbox Code Playgroud)

结果是,HTML:

<select ng-model="ampm" ng-options="currOption for currOption in ['AM', 'PM']" class="ng-pristine ng-valid">
    <option value="0" selected="selected">AM</option>
    <option value="1">PM</option>
</select>
Run Code Online (Sandbox Code Playgroud)

......这很好.然而,'AM''PM'正在投入的ampm模型.是否可以将0或1之类的索引放入此模型中?我想要有整数索引来引用数组中的位置,但不是这个位置需要重新计算的值.

UPDATE

有没有办法避免创建一对数组?

Kar*_*arl 8

您可以将select设置为使用元素的索引作为模型.

这使用Angular文档中详述的ng-options语法select as label for value in array:http://docs.angularjs.org/api/ng.directive:select

我已经更新了jsFiddle:

http://jsfiddle.net/EyBVN/28/

HTML:

<div ng-app ng-controller="MyCtrl">
    <select 
    ng-model="ampm" 
    ng-options="options.indexOf(currOption) as currOption for currOption in options"></select>
    AM/PM: {{ampm}}
</div>
Run Code Online (Sandbox Code Playgroud)

JS:

function MyCtrl($scope) {
    $scope.options = ['AM', 'PM'];
    $scope.ampm = 0;
}
Run Code Online (Sandbox Code Playgroud)