Ng-options с простым инициализацией массива

Я немного запутался с Angular и ng-options.

У меня есть простой массив, и я хочу инициализировать его. Но, я хочу, чтобы это значение value = label.

script.js

$scope.options = ['var1', 'var2', 'var3'];

HTML

<select ng-model="myselect" ng-options="o for o in options"></select>

Что я получаю:

<option value="0">var1</option>
<option value="1">var2</option>
<option value="2">var3</option>

Что я хочу:

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

Итак, я попробовал:

<select ng-model="myselect2" ng-init=0 ng-options="options[k] as v for (k,v) in options"></select>

<select ng-model="myselect3" ng-init=0 ng-options="b as b for b in options"></select>

(Но это не сработало.)

Edit:

Моя форма отправляется извне, поэтому мне нужно "var1" в качестве значения вместо 0.

Ответ 1

В действительности вы сделали это правильно в своей третьей попытке.

 <select ng-model="myselect" ng-options="o as o for o in options"></select>

См. рабочий пример здесь: http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p=preview

Хитрость заключается в том, что AngularJS записывает ключи как числа от 0 до n в любом случае и переводит назад при обновлении модели.

В результате HTML будет выглядеть некорректно, но при выборе значения модель все равно будет правильно настроена. (то есть AngularJS будет переводить '0' обратно в 'var1')

Решение Epokk также работает, однако, если вы загружаете данные асинхронно, вы можете обнаружить, что он не всегда корректно обновляется. Использование ngOptions будет корректно обновляться при изменении области действия.

Ответ 2

Вы можете использовать ng-repeat с option следующим образом:

<form>
    <select ng-model="yourSelect" 
        ng-options="option as option for option in ['var1', 'var2', 'var3']"
        ng-init="yourSelect='var1'"></select>
    <input type="hidden" name="yourSelect" value="{{yourSelect}}" />
</form>

Когда вы отправляете свой form, вы можете получить значение скрытого ввода.

DEMO

ng-selected ng-repeat

Ответ 3

Если вы настроили свой выбор следующим образом:

<select ng-model="myselect" ng-options="b for b in options track by b"></select>

вы получите:

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

рабочая скрипка: http://jsfiddle.net/x8kCZ/15/

Ответ 4

вы можете использовать что-то вроде

<select ng-model="myselect">
    <option ng-repeat="o in options" ng-selected="{{o==myselect}}" value="{{o}}">
        {{o}}
    </option>
</select>

используя ng-selected, вы предварительно выбираете опцию в случае, если myselect был предварительно заполнен.

Я предпочитаю этот метод по ng-options в любом случае, так как ng-options работает только с массивами. ng-repeat также работает с json-подобными объектами.

Ответ 5

<select ng-model="option" ng-options="o for o in options">

$scope.option будет равно "var1" после изменения, даже если вы видите value = "0" в сгенерированном html

plunker