AngularJS et ngOptions : binder une valeur primitive à un tableau d’objet dans un select

La directive select d’AngularJS combinée à l’attribut ngOptions permet de générer une liste d’options pour le tag HTML select à partir d’un tableau ou d’un objet. La valeur sélectionnée étant attachée (bindé) au modèle spécifié par l’attribut ngModel.

<select ng-options="category for category in categories" ng-model="book.category"></select>

Dans cet exemple, la syntaxe utilisée est la suivante : « label for item in array ». « label » est la valeur affichée dans les éléments HTML option, « item » représente un élément du tableau et « array » le tableau de valeurs. Etant donné qu’un tableau JavaScript ne contient pas de clés, le label doit ici avoir le même nom que la valeur. Dans le cas d’un tableau d’objets, ça peut-être n’importe quelle propriété des objets.

Une fois la tableau de valeurs transformé en tableau d’objets, l’écriture est la suivante :

<select ng-options="category.name for category in categories" ng-model="book.category"></select>

L’utilisation basique du ngOptions ne pose pas de problèmes mais ça se complique dès qu’il faut associer le select à une valeur existante. A partir de l’exemple précédent, imaginons que nous récupérons notre livre d’une base de données et que celui-ci ait déjà sa catégorie de précisée. Dans ce cas le select doit ajouter l’attribut « selected » à l’option correspondant à la catégorie du livre.

En gardant exactement la même notation pour le ngOptions et en précisant la catégory du livre, aucune option n’est sélectionnée :

$scope.book.category = 'SF';

Si aucune n’option n’est sélectionnée c’est parce que AngularJS ne sait pas à quel objet la catégory ‘SF’ correspond. Pour lui indiquer sur quelle valeur nous voulons lier la propriété du modèle il faut ajouter la notation « select as ».

<select ng-options="category.name as category.name for category in categories" ng-model="book.category"></select>

De cette façon category.name devient le modèle. Sans le « select as » la comparaison est faite sur l’objet entier.

Commentaires

  1. Pingback: IneatConseil » AngularJS et ngOptions : binder une valeur primitive à un tableau d’objet dans un select

  2. Léguman

    Merci beaucoup pour cette aide très clair.

Ajouter un commentaire