ng-options с простым массивом init

Я немного запутался в 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>

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

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

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


angularjs ng-options ng-grid
person Dragu    schedule 13.08.2013    source источник

Ответы (5)


arrow_upward
309
arrow_downward

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

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

person James Davies    schedule 13.08.2013
comment
Вы не по теме. Вы не поняли инструкции. Он хочет value в своем select. - person EpokK; 13.08.2013
comment
Я понял инструкции, однако вполне вероятно, что его намерение состоит в том, чтобы привязать «значение» к модели, и он неправильно понимает, что происходит из-за того, как AngularJs отображает тег. - person James Davies; 13.08.2013
comment
Он работает, если вы получаете значение select с помощью angular, но в моем случае (т.е. классическая форма отправки) значения будут 0,1,2,3, а не var1, var2, var3 - person Dragu; 13.08.2013
comment
Я предполагал, что вы привязаны к модели, но если вы просто используете AngularJS для рендеринга формы, отправленной извне в angular, используйте решение EpokK. - person James Davies; 13.08.2013
comment
Вопрос был довольно ясным, но я полагал, что есть большая вероятность, что вы просто хотите привязаться к модели и смотреть на визуализированный HTML-код, предполагая, что вы ошиблись с выражением ngOptions, хотя на самом деле вы были правы. - person James Davies; 13.08.2013
comment
o для o в опциях достаточно - person Toolkit; 13.08.2014
comment
Это только у меня, или это самый надуманный и непонятный синтаксис? - person fool4jesus; 11.11.2014
comment
Не только ты. В этом есть смысл, когда вы это понимаете, но это могло бы быть намного лучше. - person James Davies; 11.11.2014
comment
У меня не работает. Я получаю 0, 1, 2 и т. Д. В тексте параметров. - person vijayst; 24.01.2015
comment
@JamesDavies, спасибо. Ваш ответ не решает вопрос Драгуса, но решает мой. :) - person robsonrosa; 09.06.2015
comment
есть ли способ получить фактическое значение вместо индекса. - person sac Dahal; 06.07.2016
comment
Мне не нравится это решение, потому что оно не выбирает параметры заранее, если вы инициализируете $scope.myselect = 0;. Вы можете инициализировать с $scope.myselect = 'var1';, но, например, если вы перезагружаете из базы данных, вам нужно сначала сопоставить значение. - person Andi Giga; 18.10.2017
comment
Поэтому я бы выбрал массив объектов json: plnkr.co/edit/Fie2LFbVwncN69RM1pviewPV?p=, если необходимо перезагрузить данные. - person Andi Giga; 18.10.2017

arrow_upward
35
arrow_downward

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

person EpokK    schedule 13.08.2013
comment
Если вы уменьшили мой ответ, проверьте мое новое решение. - person EpokK; 13.08.2013

arrow_upward
21
arrow_downward

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

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

person iPirat    schedule 18.03.2014
comment
ng-options также работает с объектными источниками данных. См. docs.angularjs.org/api/ng/directive/select. - person Charlie Schliesser; 28.08.2014
comment
Хотя другие предлагали обходные пути, это решение на сегодняшний день является наиболее элегантным и близким к старому стилю html, работает как с привязкой угловой модели, так и с отправкой формы. Спасибо! - person Fadi Chamieh; 19.11.2014
comment
ng-selected не требует руля, поскольку это директива angular. Отличное решение. - person Kasey Speakman; 10.12.2014

arrow_upward
21
arrow_downward

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

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

person Ida N    schedule 14.07.2015
comment
Это решение было единственным, которое помогло мне выбрать начальное значение в массиве строк. - person Ena; 10.08.2015
comment
да, это должен быть ответ, трек творит для меня магию. - person Gurnard; 19.04.2016
comment
Я меньше всего ожидал после следующих решений, но это был простой выход - person sac Dahal; 06.07.2016

arrow_upward
10
arrow_downward 

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

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

плункер

person Toolkit    schedule 13.08.2014