Les Filtres AngularJS :
AngularJs contient des Filtres pour formater les données, ci-dessous quelques exemple :
- currency
: Formater un nombre en format devise
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="Ctrl"> <p>le montant est : {{montant | currency}}</p> </div> <script> var app = angular.module('myApp',[]); app.controller('Ctrl',function($scope){ $scope.montant=200; }); </script> </body> </html> |
- date
: Formater une date
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="dateCtrl"> <p>Date = {{ dateJour | date }}</p> </div> <script> var app = angular.module('myApp', []); app.controller('dateCtrl', function($scope) { $scope.dateJour = new Date(); }); </script> </body> </html> |
– uppercase
: Afficher une chaine de caractére en majuscule
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="Ctrl"> <p>Votre site préféré est {{nomSite | uppercase}}</p> </div> <script> var app = angular.module('myApp',[]); app.controller('Ctrl',function($scope){ $scope.nomSite="opentuto"; }); </script> </body> </html> |
– lowercase
: Afficher une chaine de caractére en miniscule
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="Ctrl"> <p>Votre site préféré est {{nomSite | lowercase}}</p> </div> <script> var app = angular.module('myApp',[]); app.controller('Ctrl',function($scope){ $scope.nomSite="OPENTUTO"; }); </script> </body> </html> |
- orderBy
: Ce filtre, o va l’ajouter dans une directive, il est utilisé pour modifier l’ordre en choisissant un critére
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="namesCtrl"> <p>Les noms ci-dessous sont triés par age:</p> <ul> <li ng-repeat="x in names | orderBy:'age'"> {{ x.name + ', ' + x.age }} </li> </ul> </div> <script> angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ {name:'Rachid',age:'31'}, {name:'Jhon',age:'25'}, {name:'Reda',age:'10'}, {name:'Toto',age:'40'}, {name:'Mehdi',age:'28'}, {name:'Badre',age:'30'}, {name:'Fred',age:'36'}, ]; }); </script> </body> </html> |
- filter
: on l’utilise pour filtrer dans les tableaux, par exemple on veux filtrer un liste et chercher les noms qui contient la lettre ‘r’
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="namesCtrl"> <p>Les noms ci-dessous contienent la lettre "r":</p> <ul> <li ng-repeat="x in names | filter : 'r'"> {{ x }} </li> </ul> </div> <script> angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ 'Rachid', 'Jhon', 'Reda', 'Toto', 'Mehdi', 'Badre', 'Fred' ]; }); </script> </body> </html> |
– On va utiliser une zone de texte pour donner la main à l’utilisateur de faire la recherche, pour ce faire on va utiliser ng-model :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="namesCtrl"> <ul> <input type="text" ng-model="fil" placeholder= "tapez quelque chose pour filtrer..." size="30"> <li ng-repeat="x in names | filter : fil"> {{ x }} </li> </ul> </div> <script> angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ 'Rachid', 'Jhon', 'Reda', 'Toto', 'Mehdi', 'Badre', 'Fred' ]; }); </script> </body> </html> |