Lorsqu’on se lance dans AngularJS (https://angularjs.org/), un des premiers éléments que l’on souhaite utiliser, se trouve être la balise HTML <select>. Celle-ci permet l’affichage de listes d’éléments sélectionnables, avec l’apport du data binding par AngularJS. On comprend tout de suite le potentiel que possède cet élément.
Pour nos différents exemples, nous allons travailler avec l’objet JSON ci-dessous :
Utilisation de ngRepeat
La première méthode pour remplir une balise <select> fait appel à l'attribut ng-repeat
https://docs.angularjs.org/api/ng/directive/ngRepeat) au niveau de la balise option.
Cette méthode fonctionne mais n’est pas adaptée à toutes les situations. Si nous reprenons la documentation d’AngularJS (https://docs.angularjs.org/api/ng/directive/select), nous pouvons lire :
- ngOptions fournit un facilitateur d’itération pour les éléments et devrait être utilisé à la place de ngRepeat lorsque vous souhaitez que le model du select soit lié à une valeur qui ne sera pas de type string. Et ce, parce qu’un élément option peut être seulement lié à une valeur de type string.
Dans le cas de manipulation de liste de string cette méthode sera appropriée. Exemple de liste de string :
Utilisation de ngOptions
Donc dans le cas de la manipulation d’objet complexe ; il sera intéressant de se reporter sur l’attribut ngOptions (https://docs.angularjs.org/api/ng/directive/ngOptions) :
Mise en place du databinding
Premièrement il va falloir définir un attribut ng-model (https://docs.angularjs.org/api/ng/directive/ngModel) afin d’effectuer le binding entre la vue et le model :
Nous rajouterons l'instruction suivante pour positionner notre sélection sur le premier élément du tableau :
Nous pouvons ensuite ajouter un message indiquant les instructions à suivre, sa sélection n'interféreras pas avec le databinding :
Mise en forme de la liste déroulante
Maintenant faisons un peu de mise en forme afin de concaténer la propriété titre et la propriété auteur. Cela se fait simplement par l’utilisation de parenthèses pour délimiter notre concaténation et par l’usage du signe « + » pour concaténer différentes chaînes de caractères. Le signe simple quotte sera utilisé pour définir manuellement une chaîne de caractères à concaténer :
Tri et filtre
Afin de rendre notre liste un peu plus sympathique nous allons aussi rajouter un tri par ordre alphabétique sur la propriété titre à l’aide la commande orderBy (https://docs.angularjs.org/api/ng/filter/orderBy) :
Un filtre peut aussi être appliqué sur les différents éléments à l’aide de l’instruction filter (https://docs.angularjs.org/api/ng/service/$filter). Dans notre exemple nous appliquerons ce filtre à la propriété booléenne enstock :
Ici nous avons vu un exemple relativement simple d’utilisation d'AngularJS avec la balise HTML <select>. Sachez qu’il est tout à fait possible d’aller plus loin par la définition de fonctions de traitement pour enrichir la mise en forme des libellés (par exemple passer la première lettre du titre du livre majuscule). Ou bien de complexifier le filtre par le conditionnement d’affichage à partir de données externes à notre liste.
Vous pouvez retrouver l'ensemble du code de cet exemple sur ce lien JSFiddle.
Simple, efficace, et complet : exactement ce dont j’avais besoin pour coder mon cinquième écran !
(Note : ce n’est pas pour rien que Netapsys accompagne l’ATIH dans le développement de cette application en Angular JS, merci ^^ )
Merci beaucoup simple et claire