Syntaxe
<select ng-options="array expression"></select>
|
Paramètres
| Nom |
Description |
| array expression |
Ce paramètre permet d'indiquer une expression sélectionnant les parties spécifiées d'un tableau pour remplir l'élément sélectionné. |
Description
Cette directive permet d'indiquer une balise «options» dans une balise «select».
Remarques
- Génération dynamique de listes déroulantes : La directive ng-options permet de créer des options dans une liste déroulante
(<select>) à partir d'une collection AngularJS. Elle est idéale pour éviter de coder manuellement chaque option et permet
de rendre les listes dynamiques et basées sur des données.
- Syntaxe puissante et flexible : La syntaxe de ng-options est très expressive, permettant de définir à la fois la valeur, l'étiquette et la clef associées
à chaque option. Par exemple, ng-options="person.id as person.name for person in people" associe l'ID comme valeur et le nom comme étiquette pour chaque élément de la
collection.
- Amélioration par rapport à ng-repeat : Contrairement à ng-repeat, pouvant aussi être utilisé pour générer des options, ng-options est optimisé
pour les éléments <select>. Elle gère automatiquement la liaison avec le modèle AngularJS et offre une meilleure performance
lorsqu'il s'agit de grandes collections.
- Support des objets complexes : Avec ng-options, il est possible d'utiliser des objets complexes comme valeurs des options. Par exemple, on peut lier
directement un objet complet à une option pour un traitement ultérieur, ce qui est particulièrement utile dans des cas avancés comme des listes d'objets
JSON.
- Gestion des valeurs par défaut : La directive supporte la définition d'une valeur par défaut en associant le modèle à une valeur initiale correspondante. Si aucune
valeur ne correspond dans la collection, l'option affichera une option vide ou une valeur par défaut personnalisée.
- Facilité pour des listes groupées : ng-options supporte la création de listes groupées avec la syntaxe group by. Par exemple, ng-options="city.name
group by city.country for city in cities" permet de regrouper les options par pays tout en affichant les villes dans chaque groupe.
- Impact sur les performances : Bien que puissante, ng-options peut devenir lente si elle est appliquée à des collections volumineuses sans optimisation. Dans
ces cas, il est conseillé d'utiliser des filtres ou de paginer les données pour éviter des ralentissements de l'interface utilisateur.
- Gestion des sélections multiples : La directive peut également être utilisée avec l'attribut multiple pour permettre la sélection de plusieurs options. La collection
liée au modèle devient alors un tableau contenant les valeurs sélectionnées, ce qui est pratique pour des formulaires complexes.
Dernière mise à jour : Dimanche, le 9 décembre 2018
