详解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 相关文章推荐
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
分页栏的web标准实现
Nov 01 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 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实现产品加入购物车功能(1)
2020/07/23 PHP
php json相关函数用法示例
2017/03/28 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
php post换行的方法
2020/02/03 PHP
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
Python3遍历目录树实现方法
2015/05/22 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
如何在django中实现分页功能
2020/04/22 Python
python numpy实现rolling滚动案例
2020/06/08 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
好药师网上药店:安全合法的网上药品零售药房
2017/02/15 全球购物
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
2014年毕业演讲稿范文
2014/05/13 职场文书
主题团日活动总结
2014/06/25 职场文书
健康状况证明模板
2014/10/23 职场文书
街道社区活动报告
2015/02/05 职场文书
5.12护士节活动总结
2015/02/10 职场文书
关于幸福的感言
2015/08/03 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
python - asyncio异步编程
2021/04/06 Python
python基于机器学习预测股票交易信号
2021/05/25 Python
分享Python异步爬取知乎热榜
2022/04/12 Python