详解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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 Javascript
vue treeselect获取当前选中项的label实例
Aug 31 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启动时候提示PHP startup的解决方法
2013/05/07 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
基于vue中的scoped坑点解说
2020/09/04 Javascript
python自动翻译实现方法
2016/05/28 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
通俗讲解python 装饰器
2020/09/07 Python
环境科学专业个人求职的自我评价
2013/11/28 职场文书
会计核算科岗位职责
2014/03/19 职场文书
世界读书日的活动方案
2014/08/20 职场文书
法人委托书范本格式
2014/09/15 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
员工加薪申请报告
2015/05/15 职场文书
政审证明范文
2015/06/19 职场文书
校园开放日新闻稿
2015/07/17 职场文书
六年级语文教学反思
2016/03/03 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS