НГ-варианты с простой массив инициализации

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

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

сценарий.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.

5 175
angularjs ng-options ng-grid

5 ответов:

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

 <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 будет правильно обновляться при изменении области.

284

можно использовать 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 вы можете получить значение входного скрыта.

демо

ng-selected НГ-повторить

33

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

<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-подобными объектами.

20

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

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

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

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

plunker

10