function filtersController($scope){ $scope.text = "hello world"; $scope.cost = 1000000000; $scope.population = 38276149; $scope.time = new Date(); $scope.entity = { name : "Johnny", surname : "Depp", country : "USA" } $scope.numbers = [1,2,3,4,5,6,7,8,9]; $scope.leet = "HeLLo WoRLd"; }
<!doctype html> <html ng-app> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> <script src="scripts/myscript.js"></script> </head> <body ng-controller="filtersController"> <div>{{text | uppercase}}</div> <div> {{cost | currency:"PLN" }} </div> <div> {{population | number}} </div> <div> {{time | date:'yyyy-MM-dd HH:mm:ss'}}</div> <div> {{entity | json}} </div> <div> {{numbers | limitTo:4}} </div> <div> {{numbers | limitTo:-4}} </div> <div> {{leet | lowercase}} </div> </body> </html>
Po uruchomieniu strony otrzymano poniższy widok:
Jeżeli dostarczone filtry nam nie wystarczają, możemy stworzyć własny filtr. Deklarujemy go w podobny sposób jak dyrektywę:
angular.module('filters', []). filter('oddUpper',function(){ return function(text){ var text = text.toUpperCase(); var text2 = text.toLowerCase(); var oddUpper = ""; for (var i = 0, length = text.length; i < length; i+=1) { oddUpper += i % 2 == 0 ? text.charAt(i) : text2.charAt(i); }; return oddUpper; } });
Widok korzysta z filtrów użytkownika w identyczny sposób jak z normalnych filtrów.
<p>My custom filter</p> <div>{{title | oddUpper}}</div>
Brak komentarzy:
Prześlij komentarz