javascript - array - obtener el valor de un select angularjs

pares clave-valor en ng-options

Question

Necesito usar una matriz asociativa como fuente de datos para mis opciones de selección usando AngularJS.

¿Es posible usar una matriz como esta?

{
    "key1": "val1",
    "key2": "val2",
    "key3": "val3",
    ...
}

y obtén algo como esto:

<select>
    <option value="key1">val1</option>
    <option value="key2">val2</option>
    <option value="key3">val3</option>
    ...
</select>

Leo documentos , pero no puedo entender cómo lograr esto.

Answer 1

use ng-option :

<select ng-model="blah" ng-options="key as value for (key , value) in data"></select>

o use ng-repeat :

<select>
    <option ng-repeat="(key, value) in data" value="{{key}}">{{value}}</option>
</select>

datos en el controlador:

$scope.data = {
    "key1": "val1",
    "key2": "val2",
    "key3": "val3",
    ...
};

Answer 2

El siguiente artículo analiza la variedad de maneras en que puede usar ngOptions (con mucho, la explicación más clara y minuciosa que he visto): http://www.undefinednull.com/2014/08/11/a-brief-walk-through-of-the-ng-options-in-angularjs/

Answer 3

La respuesta de realidad brinda las dos formas de acceder a los objetos. Solo quiero agregar algunas líneas más

Debido a que la directiva ng-repeat repite un bloque de código HTML para cada elemento en una matriz, se puede usar para crear opciones en una lista desplegable, pero la directiva ng-options se creó especialmente para llenar una lista desplegable con opciones y tiene a al menos una ventaja importante:

Los desplegables hechos con ng-options permiten que el valor seleccionado sea un objeto, mientras que los desplegables hechos a partir de ng-repeat tienen que ser una cadena.

Agregar un ejemplo para la referencia:

ng-repeat : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_select_repeat_selected

ng-options : http://www.w3schools.com/angular/tryit.asp?filename=try_ng_select_object

Para una referencia completa, diríjase a http://www.w3schools.com/angular/angular_select.asp