ng-opciones con inicio de matriz simple
Estoy un poco confundido con Angular y ng-options.
Tengo una matriz simple y quiero iniciar un select con ella. Pero, quiero que las opciones value = label.
Script.js
$scope.options = ['var1', 'var2', 'var3'];
Html
<select ng-model="myselect" ng-options="o for o in options"></select>
Lo que obtengo:
<option value="0">var1</option>
<option value="1">var2</option>
<option value="2">var3</option>
Lo que quiero:
<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>
Así que lo intenté:
<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>
(Pero no funcionó.)
Editar:
Mi formulario se envía externamente, por lo que necesito 'var1' como valor en lugar de 0.
5 answers
En realidad lo tenías correcto en tu tercer intento.
<select ng-model="myselect" ng-options="o as o for o in options"></select>
Vea un ejemplo de trabajo aquí: http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p=preview
El truco es que AngularJS escribe las claves como números de 0 a n de todos modos, y se traduce al actualizar el modelo.
Como resultado, el HTML se verá incorrecto, pero el modelo se establecerá correctamente al elegir un valor. (es decir, AngularJS traducirá ' 0 'de nuevo a 'var1')
El la solución de Epokk también funciona, sin embargo, si está cargando datos de forma asíncrona, es posible que no siempre se actualice correctamente. El uso de ngOptions se actualizará correctamente cuando cambie el alcance.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-13 06:34:45
Puedes usar ng-repeat con option así:
<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>
Cuando envíes tu form puedes obtener el valor de entrada oculto.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-13 09:30:14
Podrías usar algo como
<select ng-model="myselect">
<option ng-repeat="o in options" ng-selected="{{o==myselect}}" value="{{o}}">
{{o}}
</option>
</select>
Usando ng-selected preselecciona la opción en caso de que myselect se haya rellenado previamente.
Prefiero este método sobre ng-options de todos modos, ya que ng-options solo funciona con matrices. ng-repeat también funciona con objetos similares a json.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-02-25 16:27:04
Si configura su select de la siguiente manera:
<select ng-model="myselect" ng-options="b for b in options track by b"></select>
Obtendrá:
<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>
Violín de trabajo: http://jsfiddle.net/x8kCZ/15 /
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-14 19:07:21
<select ng-model="option" ng-options="o for o in options">
Scope alcance.la opción será igual a 'var1' después del cambio, incluso si ve value = " 0 " en html generado
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-12-23 00:19:27