Solución:
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 en AngularJS, ahora es posible establecer el valor real para el value atributo de select elemento con track by expresió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 están teniendo dificultades para recordar esta forma de sintaxis: Estoy de acuerdo en que esta no es la sintaxis más fácil o hermosa. Esta sintaxis es una especie de versión extendida de la lista de comprensiones 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']
Esta es en realidad la misma sintaxis que la primera listada arriba. Sin embargo, en <select> Por lo general, necesitamos diferenciar entre el valor real en el código y el texto que se muestra (la etiqueta) en un <select> elemento.
Como, necesitamos person.id en el código, pero no queremos mostrar el id al usuario; queremos mostrar su nombre. Del mismo modo, no estamos interesados en person.name en el código. Viene el as palabra clave para etiquetar cosas. Entonces se vuelve así:
person.id as person.name for person in people
O, en lugar de person.id podríamos necesitar el person instancia / referencia en sí misma. Vea abajo:
person as person.name for person in people
Para los objetos de JavaScript, también se aplica el mismo método. Solo recuerda que los elementos del objeto se deconstruyen con (key, value) pares.
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 usa 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>
Yo también tuve este problema. No pude establecer mi valor en ng-options. Cada opción que se generó se estableció 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 “seguir por” 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. 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 🙂