¿Cómo configuro la propiedad de valor en las ng-options de AngularJS?

Esto es lo que parece estar molestando a mucha gente (incluyéndome a mí).

Cuando uso la ng-optionsdirectiva en AngularJS para completar las opciones de una <select>etiqueta, no puedo entender cómo establecer el valor de una opción. La documentación para esto no está muy clara, al menos para un simplón como yo.

Puedo configurar el texto para una opción fácilmente así:

ng-options="select p.text for p in resultOptions"

Cuando resultOptionses por ejemplo:

[
    {
        "value": 1,
        "text": "1st"
    },
    {
        "value": 2,
        "text": "2nd"
    }
]

Debería ser (y probablemente sea) lo más sencillo establecer los valores de las opciones, pero hasta ahora no lo entiendo.

Aug 27 '12 16:08 Jukka Puranen

Ver ngOptions

ngOptions(opcional) – { comprehension_expression=} – en una de las siguientes formas:

Para fuentes de datos de matriz : label for value in array select as label for value in array label group by group for value in array select as label group by group for value in array track by trackexpr Para fuentes de datos de objetos: label for (key , value) in object select as label for (key , value) in object label group by group for (key, value) in object select as label group by group for (key, value) in object

En tu caso debería ser

array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

<select ng-options="obj.value as obj.text for obj in array"></select>

Actualizar

Con las actualizaciones de AngularJS, ahora es posible establecer el valor real para el valueatributo del selectelemento con track byexpresión.

<select ng-options="obj.text for obj in array track by obj.value">
</select>

Cómo recordar estas cosas feas

A todas las personas que tienen dificultades para recordar esta forma de sintaxis: estoy de acuerdo en que esta no es la sintaxis más fácil ni la más hermosa. Esta sintaxis es una especie de versión extendida de las listas por comprensión de Python y saber eso me ayuda a recordar la sintaxis muy fácilmente. Es algo como esto:

Código Python:

my_list = [x**2 for x in [1, 2, 3, 4, 5]]
> [1, 4, 9, 16, 25]

# Let people to be a list of person instances
my_list2 = [person.name for person in people]
> my_list2 = ['Alice', 'Bob']

En realidad, esta es la misma sintaxis que la primera enumerada anteriormente. Sin embargo, <select>normalmente necesitamos diferenciar entre el valor real en el código y el texto que se muestra (la etiqueta) en un <select>elemento.

Por ejemplo, necesitamos person.idel código, pero no queremos mostrárselo idal usuario; queremos mostrar su nombre. Del mismo modo, no nos interesa el person.namecódigo. Ahí viene la aspalabra clave para etiquetar cosas. Entonces queda así:

person.id as person.name for person in people

O, en lugar de eso, person.idpodríamos necesitar la personinstancia/referencia misma. Vea abajo:

person as person.name for person in people

Para los objetos JavaScript, también se aplica el mismo método. Solo recuerda que los elementos del objeto se deconstruyen por (key, value)pares.

Aug 27 '2012 10:08 Umur Kontacı

Cómo los atributos de valor obtienen su valor:

Cuando se utiliza una matriz como fuente de datos, será el índice del elemento de la matriz en cada iteración;
Cuando se utiliza un objeto como fuente de datos, será el nombre de la propiedad en cada iteración.

Entonces en tu caso debería ser:

obj = { '1': '1st', '2': '2nd' };

<select ng-options="k as v for (k,v) in obj"></select>

Sep 12 '2012 08:09 frm.adiputra

Yo también tuve este problema. No pude establecer mi valor en ng-options. Cada opción que se generó se configuró con 0, 1, ..., n.

Para hacerlo bien, hice algo como esto en mis ng-options:

HTML:

<select ng-options="room.name for room in Rooms track by room.price">
    <option value="">--Rooms--</option>
</select>

Utilizo "track by" para establecer todos mis valores con room.price.

(Este ejemplo apesta: porque si hubiera más de un precio igual, el código fallaría. Así que ASEGÚRESE de tener valores diferentes).

JSON:

$scope.Rooms = [
            { name: 'SALA01', price: 100 },
            { name: 'SALA02', price: 200 },
            { name: 'SALA03', price: 300 }
        ];

Lo aprendí de la publicación del blog Cómo establecer el valor seleccionado inicial de un elemento seleccionado usando Angular.JS ng-options & track by .

Ver el vídeo. Es una buena clase :)

Apr 10 '2014 19:04 Bruno Gomes