Focus sur les filtres AngularJS – Développeur Front End chez [sfΞir] – Anime la page HTML5 * CSS3 - ʕ๏๏ʔ
Focus sur les filtres AngularJS – Développeur Front End chez [sfΞir] – Anime la page HTML5 * CSS3 - ʕ๏๏ʔ
0 0
slides-prez-angular-filters
slides de présentation des filtres AngularJSOn Github lauterry / slides-prez-angular-filters
Focus sur les filtres AngularJS
presenté par LAU Thierry - @laut3rry
Développeur Front End chez [sfΞir]
Anime la page HTML5 * CSS3 - ʕ๏๏ʔ
et la communauté HTML5 * CSS3 [FR]
hello
HELLO
1368730200
Jeudi 16 mai 2013 20H50
1234.562342
1 234,56 €
[Thierry, David, Nelly, Alex, Claire]
[Alex, Claire, David, Nelly, Thierry]
[pommes, pâtes, farine, PQ]
[PQ]
Transformer la donnée pour l'afficher à l'utilisateur
formater, convertir, filtrer, trier, transformer
$scope.amount = 1234.56;
<div>{{amount}}</div> <!-- 1234.56 -->
<div>{{amount | currency}}</div> <!-- $1,234.56 -->
<div>{{amount | currency:"USD$"}}</div> <!-- USD$1,234.56 -->
Filtres AngularJS
- currency
- number
- date
- lowercase
- uppercase
- limitTo
- filter
- orderBy
{{ demo }}
Créer vos propres filtres
<html ng-app="myModule">
<div>{{name | greet}}</div> <!-- Yo Thierry -->
</html>
angular.module("myModule")
.filter('greet', function (dep1, dep2, ...) {
});
<html ng-app="myModule">
<div>{{name | greet}}</div> <!-- Yo Thierry -->
</html>
angular.module("myModule")
.filter('greet', function (dep1, dep2, ...) {
return function(value) {
return 'Yo ' + value;
};
});
<html ng-app="myModule">
<div>{{name | greet:true}}</div> <!-- Bonjour Thierry -->
</html>
angular.module("myModule")
.filter('greet', function (dep1, dep2, ...) {
return function(value, isPolite) {
if(isPolite){
return 'Bonjour ' + value;
} else {
return 'Yo ' + value;
}
};
});
Injectable
function myController($scope, greetFilter){
};
Facilement Testable
{{ DEMO }}
Declarative
Pas de manipulation de DOM
Merci de votre attention !
twitter : @laut3rry
google + : gplus.to/lauthierry