Le blog

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 :

{
  "livres": [
    {
      "titre": "Les misérables",
      "auteur": "Victor Hugo",
      "page": 890,
      "enstock":true,
      "id": 1
    },
    {
      "titre": "Le seigneur des anneaux",
      "auteur": "J.R.R. Tolkien",
      "page": 1500,
      "enstock":true,
      "id": 2
    },
    {
      "titre": "Fondation",
      "auteur": "Isaac Asimov",
      "page": 550,
      "enstock":true,
      "id": 3
    },
    {
      "titre": "Rama",
      "auteur": "Arthur C.Clarke",
      "page": 550,
      "enstock":false,
     "id": 4
   }
 ]

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.

<select>
<option ng-repeat="livre in livres">{{livre.titre}}</option>
</select>

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 :

{
"livres": [
"Les misérables",
"Le seigneur des anneaux",
"Fondation",
"Rama"
]
}

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) :

<select ng-options="livre.titre for livre in livres">
</select>

var liste_livre = {"livres":[{"titre":"Les misérables","auteur":"Victor Hugo","page":890,"enstock":true,"id":1},{"titre":"Le seigneur des anneaux","auteur":"JJR Tollien","page":1500,"enstock":true,"id":2},{"titre":"Fondation","auteur":"Isaac Asimov","page":550,"enstock":true,"id":3},{"titre":"Rama","auteur":"Arthur C.Clarke","page":550,"enstock":false,"id":3}]};
$scope.livres = liste_livre.Livres;

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 :

<select ng-model="livre_selection" ng-options="livre.titre for livre in livres">
</select>

Nous rajouterons l'instruction suivante pour positionner notre sélection sur le premier élément du tableau :

$scope.livre_Selection = $scope.Livres[1];

Nous pouvons ensuite ajouter un message indiquant les instructions à suivre, sa sélection n'interféreras pas avec le databinding :

<select ng-model="livre_selection" ng-options="livre.titre for livre in livres">
<option value="">Sélectionnez un livre</option>
</select>

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 :

<select ng-model="livre_selection" ng-options="livre as (livre.titre + ' ' + livre.auteur) for livre in livres">
<option value="">Sélectionnez un livre</option>
</select>

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) :

<select ng-model="livre_selection" ng-options="livre.id as (livre.titre + ' - ' + livre.auteur) for livre in livres | orderBy:'titre' ">
<option value="">Sélectionnez un livre</option>
</select>

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 :

<select ng-model="livre_selection" ng-options="livre.id as (livre.titre + ' ' + livre.auteur) for livre in livres | orderBy:'titre'| filter:{enstock:'true'}">
<option value="">Sélectionnez un livre</option>
</select>

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.