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 实现的自定义对话框
Mar 24 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
Nov 20 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
小程序实现录音功能
Sep 22 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 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性能优化的介绍
2013/06/20 PHP
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
php强制运行广告的方法
2014/12/01 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
js 页面输出值
2008/11/30 Javascript
火狐下table中创建form导致两个table之间出现空白
2013/09/02 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
浅谈JavaScript 代码简洁之道
2019/01/09 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
Python实现两款计算器功能示例
2017/12/19 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
中学生团员自我评价分享
2013/12/07 职场文书
三年级科学教学反思
2014/01/29 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
投资入股协议书
2016/03/22 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS