详解Angularjs filter过滤器


Posted in Javascript onFebruary 06, 2016

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

Filter是用来格式化数据用的。

Filter的基本原型( '' 类似于Linux中的管道模式):

{{ expression filter }}

Filter可以被链式使用(即连续使用多个filter):

{{ expression filter1 filter2 ... }}

Filter也可以指定多个参数:

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

一,内置的过滤器

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管道命令可以有多个

以上所述是小编给大家介绍的angularjs filter过滤器相关知识,希望对大家有所帮助,更多有关angularjs filter相关知识敬请关注三水点靠木网站。谢谢!

Javascript 相关文章推荐
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
JS闭包用法实例分析
Mar 27 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 #Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 #Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 #Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 #Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 #Javascript
AngularJs中route的使用方法和配置
Feb 04 #Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 #Javascript
You might like
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
javascript事件问题
2009/09/05 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
js定时器实例分享
2016/12/20 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
python实现各进制转换的总结大全
2017/06/18 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
Python环境管理virtualenv&virtualenvwrapper的配置详解
2020/07/01 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
自我评价是什么
2014/01/04 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
求职信的最佳写作思路
2014/02/01 职场文书
致800米运动员广播稿
2014/02/16 职场文书
创业计划书之烤红薯
2019/09/26 职场文书