Angularjs中使用Filters详解


Posted in Javascript onMarch 11, 2016

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的常用用法。

Javascript 相关文章推荐
Stop SQL Server
Jun 21 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
js常用自定义公共函数汇总
Jan 15 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
完善的jquery处理机制
Feb 21 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
jQuery-App输入框实现实时搜索
Nov 19 jQuery
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 #Javascript
JavaScript制作简单的日历效果
Mar 10 #Javascript
js滑动提示效果代码分享
Mar 10 #Javascript
js实现页面跳转的五种方法推荐
Mar 10 #Javascript
js实现页面跳转的五种方法推荐
Mar 10 #Javascript
js实现上一页下一页的效果【附代码】
Mar 10 #Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 #Javascript
You might like
PHP date函数参数详解
2006/11/27 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
jquery 表单进行客户端验证demo
2009/08/24 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
Python新手学习raise用法
2020/06/03 Python
python中return如何写
2020/06/18 Python
Python内置函数property()如何使用
2020/09/01 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
大学生文员专业个人求职信范文
2014/01/05 职场文书
公益活动邀请函
2014/02/05 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
交通事故调解协议书
2014/04/16 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
政工例会汇报材料
2014/08/26 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书