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


187

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

У меня есть простой массив, и я хочу, чтобы начать выбор с ним. Но я хочу, чтобы значение параметра = метка.

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>

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

Редактировать:

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

Ответы:


304

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

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


1
Ты не по теме. Вы не поняли инструкции. Он хочет valueпо своему select.
EpokK

10
Я понял инструкции, однако вполне вероятно, что он намеревается связать «значение» с моделью и неправильно понимает, что происходит из-за того, как AngularJs отображает тег.
Джеймс Дэвис

3
Это работает, если вы получаете значение select с помощью angular, но в моем случае (т.е. в классической форме отправки) значения будут 0,1,2,3, а не var1, var2, var3
Dragu

1
Я предполагал, что вы привязываетесь к модели, но если вы просто используете AngularJS для визуализации формы, отправленной извне в angular, то используйте решение EpokK.
Джеймс Дэвис

66
Это только я, или это самый измученный и неясный синтаксис?
fool4jesus

35

Вы можете использовать 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

нг-выбран нг-повтор


Если вы уменьшили мой ответ, проверьте мое новое решение.
EpokK

21

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

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


1
ng-optionsтакже работает с объектными источниками данных. См. Docs.angularjs.org/api/ng/directive/select
Чарли

1
Хотя другие предлагали обходные пути, это решение на сегодняшний день является наиболее элегантным и близким к старому стилю HTML, работает как с угловым связыванием модели, так и с отправкой формы. Спасибо!
Фади Чамие,

4
ng-selected не нуждается в руле, поскольку это угловая директива. Отличное решение.
Кейси Спикман

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/


1
Это единственное решение, которое помогло мне выбрать начальное значение в массиве строк.
Эна

да, это должен быть ответ, трек делает магию для меня.
Gurnard

Я меньше всего ожидал после следующих решений, но это был легкий выход
sac Dahal

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

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

plunker

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.