pares clave-valor en ng-options

Necesito usar una matriz asociativa como fuente de datos para mis opciones select usando AngularJS.

¿Es posible usar una matriz como esta?

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

Y obtener algo como esto: 

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

Leí docs, pero no puedo entender cómo lograr esto.

Author: davioooh, 2014-02-12
Source

3 answers

Use ng-option: 

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

O utilizar 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",
    ...
};
 145
Author: Chen-Tsu Lin,
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-08 13:36:04

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

 18
Author: Markus Hay,
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-10-02 12:43:18

Respuesta de Chen-Tsu Lin en realidad da ambas formas de acceder a los objetos. Solo quiero añadir algunas líneas más -

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

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

Añadiendo 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

 2
Author: Janusz01,
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
2017-05-23 12:17:59