Filter作用就是接收一个输入,通过某个规则进行处理,然后给用户返回处理后的结果。Filter可以用在模板、控制器、或者服务,同时也会很容易自定义一个Filter过滤器。
在模板中使用Filter
Filter可以用于在视图模板中使用一下语法表达式:
{{ expression | filter }}
例如:格式{{ 12 | currency }}是使用currency的filter用法,让数字12过滤为货币形式,结果是$12.00。
Filter可以应用到另一个过滤的结果中。这就是所谓的“chaining”,使用语法如下:
{{ expression | filter1 | filter2 | ... }}
Filter中可能需要参数。语法为:
{{ expression | filter:argument1:argument2:... }}
例如:格式{{ 1234 | number:2 }}是使用number的filter用法,将数字1234过滤为有两位小数点的数字,结果为:1,234.00 。
在controller、services、directives中使用filter
你可以在controller、services、directives中使用filter。
为此,你需要将依赖项名称注入到你的controller/service/directive中:filter;例如:一个过滤器是number,你就需要通过使用依赖注入numberFilter。注入的参数是一个函数,该函数将值作为第一个参数,然后用第二个参数来筛选参数。
下面的例子使用了叫做filter的Filter过滤器。这个filter可以在sub arrays的基础上减少arrays。也可以应用在视图模板的标记,就像:{{ctrl.array|filter:'a'}},这将为‘a'做一个全文搜索。然而,在视图模板中使用filter将会重新对每一个filter过滤,如果数组比较大的会是加载多次的。
因此下面的例子直接调用在控制器中的filter。通过这个,控制器可以在需要是调用filter(例如:当后端数据加载时或者filter的表达式改变时)。
index.html:
<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>
script.js:
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'); }]);
结果为:
All entries: Tobias Jeff Brian Igor James Brad Entries that contain an "a": Tobias Brian James Brad
创建自定义filters:
编写自己的filter是非常简单的:只需要在你的模块中注册一个新的filter factory函数。在内部,这里用了filterProvider。这个factory函数应该返回一个新的filter函数并且将输入值作为第一个参数。任何过滤器参数都会作为附加参数传递到过滤器函数中。
这个过滤器函数应该是一个单纯的函数。这意味着它应该stateless 和 idempotent。当输入的函数变化时,angular依赖这些属性并且执行filter。
注意:filter的名称必须是有效的angular表达式标识符。例如uppercase或者orderBy。名字是不允许有特殊的字符,如连字符和点是不允许的。如果你希望你的过滤器有名称空间,那么你可以使用大写(myappSubsectionFilterx)或者下划线(myapp_subsection_filterx)。
下面的示例filter是反写一个字符串。另外,它可以再加一个条件使字符串大写。
index.html
<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>
script.js
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); }]);
结果为:
No filter: hello Reverse: olleh Reverse + uppercase: OLLEH Reverse, filtered in controller: olleh
有状态的filters(Stateful filters)
强烈建议写有状态的filters,因为这些不能用angular进行优化,这往往会导致性能问题。许多有状态的filters转换成无状态的filters仅仅通过揭露隐藏的状态作为model,并且将其转化为一个filter参数。
然而,如果你需要写一个有状态的filters,你必须将filter标记为$stateful,这也就意味着它将在每一个$digest周期内执行一次或多次。
index,html
<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>
script.js:
angular.module('myStatefulFilterApp', []) .filter('decorate', ['decoration', function(decoration) { function decorateFilter(input) { return decoration.symbol + input + decoration.symbol; } decorateFilter.$stateful = true; return decorateFilter; }]) .controller('MyController', ['$scope', 'decoration', function($scope, decoration) { $scope.greeting = 'hello'; $scope.decoration = decoration; }]) .value('decoration', {symbol: '*'});
结果为:
No filter: hello Decorated: *hello*
下次会写一篇angularjs中filter的常用用法。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]
- TrioZimbalist-PianoTriosofWeinberg,Auerbach,Dvorak(2024)[24-44,1]wav
- 群星.1992-滚石第一流台湾歌·12王牌大车拼【滚石】【WAV+CUE】
- 林子祥.1984-创作歌集【华纳】【WAV+CUE】
- 周汤豪.2010-周汤豪【华纳】【FLAC分轨】
- Mozart-TheStringQuintets-AmadeusQuartet,CecilAronowitz(2017)[24-44,1][WAV+CUE]
- JamesWilliamsDennisIrwin-Focus(2024,Red)[24-48]FLAC
- 藤泽麻衣《空みあげて》[WAV]
- 纯音入心系列纯音乐《中国古筝经典名曲》1CD[MP3][1.3GB]
- 纯音入心系列纯音乐《古筝新奏:岁月静好与筝语,细水流年与筝同》1CD[MP3][846.9MB]
- 670《脆弱敏感小女生》[320K/MP3][27.53MB]
- 曾琳.2011-好好爱我【南方】【WAV+CUE】
- 范晓萱.1995-RAIN【福茂】【WAV+CUE】