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 相关文章推荐
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
有关js的变量作用域和this指针的讨论
Dec 16 Javascript
js Date概念详细介绍
Nov 22 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
Jul 10 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
使用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加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
分享下PHP register_globals 值为on与off的理解
2013/09/26 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
心理健康教育制度
2014/01/27 职场文书
七一党建活动方案
2014/01/28 职场文书
医院院务公开实施方案
2014/05/03 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
计算机售后服务承诺书
2014/05/30 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python