AngularJS

Tri

Nous avons vu plus tôt comment afficher le contenu d'une boucle grâce à l'attribut ng-repeat. Problème : les éléments s'affichent dans l'ordre des inscriptions du conteneur d'éléments.

Nous allons donc voir comment trier par ordre alphabétique les éléments d'un tableau créé dans le controller.

  1. angular.module('myApp').controller('boucler',['$scope',function($scope){
  2. $scope.tableau = ['zèbre','éléphant','singe','abeille','ours'];
  3. }]);

Une fois le tableau créé dans le controller, il faut faire une boucle avec un orderBy.

Attention, les éléments commençants par une lettre accentuée ne sont pas pris en compte.

  1. <ul>
  2. <li ng-repeat="element in tableau | orderBy : element">{{element}}</li>
  3. </ul>

Il est aussi possible de trier dans le sens inverse grace à l'élément reverse que l'on place après le orderBy.

  1. <ul>
  2. <li ng-repeat="element in tableau | orderBy : element : reverse = true">{{element}}</li>
  3. </ul>

Exemples

Tri par ordre alphabétique

  • abeille
  • ours
  • singe
  • zèbre
  • éléphant

Tri par ordre alphabétique inverse

  • éléphant
  • zèbre
  • singe
  • ours
  • abeille