Angularjs ngOption с массивом

Я хочу добавить html select с параметрами AM, PM с angularjs, то, что мне нужно, имеет ключ, а значение параметра - одно и то же:

<option value="AM">AM</option>
<option value="PM">PM</option>

Мой html выглядит как

<select ng-model="ampm" ng-options="k as v for (k , v) in ampms"></select>

и мой контроллер выглядит как

  $scope.ampm = (new Date().getHours()) >= 12 ? 'PM' : 'AM';
  $scope.ampms ={"AM":"AM","PM":"PM"};

и все прекрасно работают.

Мой вопрос в том, почему я не могу иметь то же самое, когда я использовал массив (я пробовал все опции в ng-вариантах) как это

$scope.ampms =["AM","PM"];

что бы я ни делал, я всегда получаю это

<option value="0">AM</option>
<option value="1">PM</option>

То, что я хочу, это использовать массив, подобный выше, с опцией имеет ключ и значение то же самое.

Ответы

Ответ 1

Это поведение по умолчанию ng-options по умолчанию в Angular. Если вы не укажете имя ключа, angular автоматически решит использовать индекс, а не ключ. Код, который делает это, можно увидеть на строке 405 в /src/ng/directives/select.js в angular репозитории Github.

Он даже не может быть принудительно "значением в качестве значения для (индекс, значение) в значениях".

Но поскольку dnc253 просто избил меня до удара с его ответом (он появился, когда я печатал)... вам не о чем беспокоиться, angular делает все это для вас автоматически.

Ответ 2

С помощью AngularJS вам не нужно беспокоиться о том, какое значение имеет значение. Все выборки, которые я видел с помощью ng-options, имеют значения 0 через все. Если вы просто ищете раскрывающийся список с двумя вариантами, это может быть так же просто, как

<select ng-model="ampm" ng-options="currOption for currOption in ['AM', 'PM']"></select>

См. http://jsfiddle.net/EyBVN/1/

Ответ 3

Я нашел способ разместить определенные данные в значении параметров для выбора. Вы должны добавить атрибут ng-repeat в тег опции внутри тега select:

<select id="{{question.id}}" name="{{question.id}}" 
    class="{{question.inputclass}}" ng-required="question.required" 
    title="{{question.title}}">
  <option value=""></option>
  <optgroup ng-repeat="group in question.data" label="{{group.group}}">
    <option ng-repeat="item in group.data" value="{{item.value}}" 
        ng-selected="{{item.value == question.defaultValue}}">
          {{item.description}}
    </option>
  </optgroup>
</select>

В качестве бонуса я оставил теги группы параметров на месте, чтобы служить примером для всех.

question.data JSON:

[
  {"group":"Canada","data":[{"value":"Ontario","description":"Toronto"},
                            {"value":"Quebec","description":"Quebec City"},
                            {"value":"Manitoba","description":"Winnipeg"}
                           ]
  },
  {"group":"Mexico","data":[{"value":"Jalisco","description":"Guadalajara"},
                            {"value":"Nayarit","description":"Tepic"}
                           ]
  },
  {"group":"United States of America","data":[
                            {"value":"Alabama","description":"Montgomery"},
                            {"value":"Georgia","description":"Atlanta"},
                            {"value":"Mississippi","description":"Jackson"},
                            {"value":"Louisiana","description":"Baton Rouge"},
                            {"value":"Texas","description":"Ausint"}
                           ]
  }
]