angular学习（十）—— Filter
|
转载请写明来源地址：http://www.52php.cn/article/p-dehbakqb-bph.html 过滤器过滤器将表达式的运算结果格式化后呈现给用户，可以用于视图模版，控制器或者服务。angularjs有一些内置的过滤器，如果想自己自定义也很容易。 在视图模版中使用过滤器过滤器可以用于视图模版中的表达式，语法如下： {{ expression | filter }}
例如， angularjs的过滤器也支持过滤链，语法如下： {{ expression | filter1 | filter2 | ... }}
过滤器还能支持参数输入，语法如下： {{ expression | filter:argument1:argument2:... }}
例如 过滤器的运行视图模版中的过滤器仅仅在输入改变时才会执行，这比每一次$digest循环都执行一次要高效的多。 但也有两种例外的情况：
在控制器,服务和指令中使用过滤器你也可以在控制器，服务和指令中使用过滤器。 为此，需要将过滤器以 下面的例子所使用的过滤器叫做filter，这个过滤器接受一个数组，并根据过滤条件产生一个子数组。如果在视图模版中表示的话，可以写成 <!DOCTYPE html> <html> <head> <meta charset="uft-8"/> <title></title> </head> <script src="script/angular.min.js"></script> <script> angular.module('FilterInControllerModule',[]). controller('FilterController',['filterFilter',function(filterFilter) { this.array = [ {name: 'Tobias'},{name: 'Jeff'},{name: 'Brian'},{name: 'Igor'},{name: 'James'},{name: 'Brad'} ]; this.filteredArray = filterFilter(this.array,'a'); }]); </script> <body ng-app="FilterInControllerModule"> <div ng-controller="FilterController as ctrl"> <div> All entries: <span ng-repeat="entry in ctrl.array">{{entry.name}} </span> </div> <div> Entries that contain an "a": <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span> </div> </div> </body> </html>
自定义过滤器自定义一个过滤器也相当容易，仅仅需要在module中注册一个新的filter工厂函数。工厂函数会返回一个新的过滤器函数，过滤器的输入作为过滤器函数的第一个参数，其他过滤器的参数作为过滤器函数的附加参数传入。 过滤器函数是一个纯函数，这意味着给出相同的输入参数总能得到相同的输出结果，而不受外界状态的影响（例如，angularjs的services）。根据这一点，angularjs才能做到仅仅当输入变化时才去执行一次过滤器。带状态带过滤器也存在，但是非常低效。 过滤器的名字必须是有效的angularjs表达式标识符，例如uppercase，orderBy。名字中不能带有特殊字符，比如 下面的例子是一个反转字符串的过滤器，并且根据参数可以选择大小写： <!DOCTYPE html> <html> <head> <meta charset="uft-8"/> <title></title> </head> <script src="script/angular.min.js"></script> <script> angular.module('myReverseFilterApp',[]) .filter('reverse',function() { return function(input,uppercase) { input = input || ''; var out = ''; for (var i = 0; i < input.length; i++) { out = input.charAt(i) + out; } // conditional based on optional argument if (uppercase) { out = out.toUpperCase(); } return out; }; }) .controller('MyController',['$scope','reverseFilter',function($scope,reverseFilter) { $scope.greeting = 'hello'; $scope.filteredGreeting = reverseFilter($scope.greeting); }]); </script> <body ng-app="myReverseFilterApp"> <div ng-controller="MyController"> <input ng-model="greeting" type="text"><br> No filter: {{greeting}}<br> Reverse: {{greeting|reverse}}<br> Reverse + uppercase: {{greeting|reverse:true}}<br> Reverse,filtered in controller: {{filteredGreeting}}<br> </div> </body> </html>
状态过滤器强烈建议不要写有状态的过滤器，因为angularjs并不会对其做优化，常常会导致性能问题。很多状态过滤器可以通过暴露模型的状态并把它作为过滤器的参数传入，来达到改为不带状态的过滤器。 如果你非要写一个带状态带过滤器，记得把过滤器标记为$stateful，这样每次$digest循环都好执行一次或多次过滤器。 <!DOCTYPE html> <html> <head> <meta charset="uft-8"/> <title></title> </head> <script src="script/angular.min.js"></script> <script> angular.module('myStatefulFilterApp',[]) .filter('decorate',['decoration',function(decoration) { function decorateFilter(input) { return decoration.symbol + input + decoration.symbol; } decorateFilter.$stateful = true; return decorateFilter; }]) .controller('MyController','decoration',decoration) { $scope.greeting = 'hello'; $scope.decoration = decoration; }]) .value('decoration',{symbol: '*'}); </script> <body ng-app="myStatefulFilterApp"> <div ng-controller="MyController"> Input: <input ng-model="greeting" type="text"><br> Decoration: <input ng-model="decoration.symbol" type="text"><br> No filter: {{greeting}}<br> Decorated: {{greeting | decorate}}<br> </div> </body> </html>
上面的例子转化为无状态过滤器： <!DOCTYPE html> <html> <head> <meta charset="uft-8"/> <title></title> </head> <script src="script/angular.min.js"></script> <script> angular.module('myStatelessFilterApp',function() { function decorateFilter(input,symbol) { return symbol + input + symbol; } decorateFilter.$stateful = true; return decorateFilter; }) .controller('MyController',function($scope) { $scope.greeting = 'hello'; $scope.symbol="*"; }]) .value('decoration',{symbol: '*'}); </script> <body ng-app="myStatelessFilterApp"> <div ng-controller="MyController"> Input: <input ng-model="greeting" type="text"><br> Decoration: <input ng-model="symbol" type="text"><br> No filter: {{greeting}}<br> Decorated: {{greeting | decorate:symbol}}<br> </div> </body> </html>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |