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 AngularJS

On 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