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

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

Declarative

Pas de manipulation de DOM

Merci de votre attention !

twitter : @laut3rry

google + : gplus.to/lauthierry

Focus sur les filtres AngularJS