详解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 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
javascript 尚未实现错误解决办法
Nov 27 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
vue 使用原生组件上传图片的实例
Sep 08 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 array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
php实现留言板功能
2017/03/05 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
ArrayList类(增强版)
2007/04/04 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
js微信分享实现代码
2020/10/11 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
python中的&&及||的实现示例
2019/08/07 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
python实现猜拳游戏
2020/03/04 Python
Python如何输出整数
2020/06/07 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
匈牙利最大的健身制造商和销售商:inSPORTline
2018/10/30 全球购物
小学生保护环境倡议书
2014/05/15 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
2014年关工委工作总结
2014/11/17 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL