ng-options con inicio de matriz simple


187

Estoy un poco confundido con Angular y ng-options.

Tengo una matriz simple y quiero iniciar una selección con ella. Pero, quiero que las opciones valor = etiqueta.

script.js

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

html

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

Lo que consigo:

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

Entonces 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.

Respuestas:


304

Realmente 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 del 0 al n de todos modos, y se traduce de nuevo al actualizar el modelo.

Como resultado, el HTML se verá incorrecto, pero el modelo aún se configurará correctamente al elegir un valor. (es decir, AngularJS traducirá '0' a 'var1')

La solución de Epokk también funciona, sin embargo, si está cargando datos de forma asincrónica, es posible que no siempre se actualice correctamente. El uso de ngOptions se actualizará correctamente cuando cambie el alcance.


1
Estás fuera de tema. No entendiste las instrucciones. Él quiere valueen la suya select.
EpokK

10
Entendí las instrucciones, sin embargo, es muy probable que su intención sea vincular el 'valor' al modelo, y está malinterpretando lo que está sucediendo debido a la forma en que AngularJs representa la etiqueta.
James Davies

3
Funciona si obtiene el valor de select con angular, pero en mi caso (es decir, el formulario de envío clásico), los valores serán 0,1,2,3, no var1, var2, var3
Dragu

1
Supuse que estaba vinculando al modelo, pero si simplemente está usando AngularJS para representar un formulario enviado externamente a angular, entonces use la solución de EpokK.
James Davies

66
¿Soy solo yo o esta es la sintaxis más confusa y confusa que existe?
fool4jesus

35

Se puede utilizar ng-repeatcon optioneste aspecto:

<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ía su formpuede obtener el valor de la entrada oculta.


DEMO

ng-seleccionado ng-repeat


Si ha disminuido mi respuesta, consulte mi nueva solución.
EpokK

21

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 completado 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.


1
ng-optionstambién funciona con fuentes de datos de objetos. Ver docs.angularjs.org/api/ng/directive/select
Charlie Schliesser

1
Aunque otros dieron soluciones, esta solución es, con mucho, el estilo html más elegante y cercano al antiguo, funciona tanto con el enlace angular del modelo como con la presentación de formularios. ¡Gracias!
Fadi Chamieh

44
ng-selected no necesita el manillar, ya que es una directiva angular. Excelente solucion.
Kasey Speakman

20

Si configura su selección de la siguiente manera:

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

conseguirás:

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

violín de trabajo: http://jsfiddle.net/x8kCZ/15/


1
Esta solución fue la única que funcionó para mí para seleccionar el valor inicial en una matriz de cadenas.
Ena

Sí, esta debería ser la respuesta, la pista me hace la magia
Perlón

Al menos esperaba después de seguir las soluciones anteriores, pero esta fue la salida fácil
sac Dahal

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

$ scope.option será igual a 'var1' después del cambio, incluso verá value = "0" en el html generado

saqueador

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.