web-dev-qa-db-fra.com

paires clé-valeur dans ng-options

Je dois utiliser un tableau associatif comme source de données pour mes options select à l'aide d'AngularJS.

Est-il possible d'utiliser un tableau comme celui-ci?

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

et obtenez quelque chose comme ça:

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

J'ai lu docs , mais je ne comprends pas comment y parvenir.

javascriptangularjsselectng-options
69
davioooh

utilisation ng-option:

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

ou utiliser ng-repeat:

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

données dans le contrôleur:

$scope.data = {
    "key1": "val1",
    "key2": "val2",
    "key3": "val3",
    ...
};
153
Chen-Tsu Lin

L'article suivant décrit les différentes manières d'utiliser ngOptions (de loin l'explication la plus claire et la plus complète que j'ai jamais vue): http://www.undefinednull.com/2014/08/11/a -brief-walk-in-of-the-ng-options-in-angularjs /

19
Markus Hay

Réponse de Chen-Tsu Lin donne en fait les deux manières d'accéder aux objets. Je veux juste ajouter quelques lignes supplémentaires -

Comme la directive ng-repeat Répète un bloc de code HTML pour chaque élément d'un tableau, elle peut être utilisée pour créer des options dans une liste déroulante, mais la directive ng-options A été créée spécialement pour remplir un menu déroulant. liste avec des options et a au moins un avantage important:

Les listes déroulantes créées avec ng-options Permettent à la valeur sélectionnée d'être un objet, tandis que les listes déroulantes créées à partir de ng-repeat Doivent être une chaîne.

Ajout d'un exemple pour la référence:

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

Pour une référence complète, rendez-vous sur http://www.w3schools.com/angular/angular_select.asp

2
Janusz01