详解AngularJS中的filter过滤器用法


Posted in Javascript onJanuary 04, 2016

系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点。这篇简单说一下angularjs的filter功能,angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的。

一,内置的过滤器
1,uppercase,lowercase大小转换

{{ "lower cap string" | uppercase }}   //结果:LOWER CAP STRING 
{{ "TANK is GOOD" | lowercase }}     //结果:tank is good

 
|这里的竖线是一种管道功能,如果对linux比较熟悉的话,这块的|根linux的管道功能,基本是一样的
2,json格式化

{{ {foo: "bar", baz: 23} | json }}  //结果:{ "foo": "bar", "baz": 23 }

注意:bza没格式前是没有双引号的,格式化后就转换成了json数据了。
3,date格式化

{{ 1304375948024 | date }}             //结果:May 3, 2011 
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}   //结果:05/03/2011 @ 6:39AM 
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}  //结果:2011-05-03 06:39:08

4,number格式化

{{ 1.234567 | number:1 }}  //结果:1.2 
{{ 1234567 | number }}    //结果:1,234,567

5,currency货币格式化

{{ 250 | currency }}         //结果:$250.00 
{{ 250 | currency:"RMB ¥ " }}    //结果:RMB ¥ 250.00

6,filter查找

{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | filter:'s'}}  //查找含有有s的行 
 
//上例结果:[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}] 
 
{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | filter:{'name':'iphone'} }}  //查找name为iphone的行 
 
//上例结果:[{"age":20,"id":10,"name":"iphone"}]

7,limitTo字符串,对像的截取

{{ "i love tank" | limitTo:6 }}      //结果:i love 
{{ "i love tank" | limitTo:-4 }}     //结果:tank 
 
{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | limitTo:1 }}   //结果:[{"age":20,"id":10,"name":"iphone"}]

8,orderBy对像排序

{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | orderBy:'id':true }}    //根id降序排 
 
{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | orderBy:'id' }}      //根据id升序排

二,自定filter功能
我找了一个基本angularjs的mvc框架,phonecat,自定义filter也是在这基础写的,这个框架挺好用的。
1,filters.js添加一个module

angular.module('tanktest', []).filter('tankreplace', function() { 
  return function(input) { 
    return input.replace(/tank/, "=====") 
  }; 
});

2,app.js中加载这个module

var phonecatApp = angular.module('phonecatApp', [ 
 'ngRoute', 
 'phonecatControllers', 
 'facebookControllers', 
 'tanktest' 
]);

3,html中调用

{{ "TANK is GOOD" | lowercase |tankreplace}}  //结果:===== is good

注意:| lowercase |tankreplace管道命令可以有多个

三、filter的两种使用方法

1. 在模板中使用filter

我们可以直接在{{}}中使用filter,跟在表达式后面用 | 分割,语法如下:

{{ expression | filter }}

也可以多个filter连用,上一个filter的输出将作为下一个filter的输入(怪不得这货长的跟管道一个样。。)

{{ expression | filter1 | filter2 | ... }}

filter可以接收参数,参数用 : 进行分割,如下:

{{ expression | filter:argument1:argument2:... }}

除了对{{}}中的数据进行格式化,我们还可以在指令中使用filter,例如先对数组array进行过滤处理,然后再循环输出:

<span ng-repeat="a in array | filter ">

  2. 在controller和service中使用filter

我们的js代码中也可以使用过滤器,方式就是我们熟悉的依赖注入,例如我要在controller中使用currency过滤器,只需将它注入到该controller中即可,代码如下:

app.controller('testC',function($scope,currencyFilter){
  $scope.num = currencyFilter(123534); 
}

在模板中使用{{num}}就可以直接输出$123,534.00了!在服务中使用filter也是同样的道理。

此时你可能会有疑惑,如果我要在controller中使用多个filter,难道要一个一个注入吗,这岂不太费劲了?小兄弟莫着急~ng提供了一个$filter服务可以来调用所需的filter,你只需注入一个$filter就够了,使用方法如下:

app.controller('testC',function($scope,$filter){
  $scope.num = $filter('currency')(123534);
$scope.date = $filter('date')(new Date()); 
}

可以达到同样的效果。好处是你可以方便使用不同的filter了。

Javascript 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
原生JavaScript实现刮刮乐
Sep 29 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
Jan 04 #Javascript
深入浅析AngularJS中的module(模块)
Jan 04 #Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 #Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 #Javascript
详解Bootstrap glyphicons字体图标
Jan 04 #Javascript
详解Bootstrap按钮
Jan 04 #Javascript
详解Bootstrap四种图片样式
Jan 04 #Javascript
You might like
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
Python遍历指定文件及文件夹的方法
2015/05/09 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
学python安装的软件总结
2019/10/12 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
医学护理系毕业生求职信
2013/10/01 职场文书
护士求职推荐信范文
2013/11/23 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
关于圣诞节的广播稿
2014/01/26 职场文书
学习之星事迹材料
2014/05/17 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
丽江古城导游词
2015/02/03 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL