详解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 相关文章推荐
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
js页面跳转的常用方法整理
Oct 18 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
元素绑定click点击事件方法
Jun 08 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
node.js实现上传文件功能
Jul 15 Javascript
解决layer.open后laydate失效的问题
Sep 06 Javascript
webpack优化之代码分割与公共代码提取详解
Nov 22 Javascript
ES6 Object.assign()的用法及其使用
Jan 18 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 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经典的给图片加水印程序
2006/12/06 PHP
php的一些小问题
2010/07/03 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
php车辆违章查询数据示例
2016/10/14 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
Python写的服务监控程序实例
2015/01/31 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
python 操作excel表格的方法
2020/12/05 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
大学生职业生涯规划书范文
2014/01/14 职场文书
仓管岗位职责范本
2014/02/08 职场文书
主管会计岗位责任制
2014/02/10 职场文书
科学发展观演讲稿
2014/09/11 职场文书
订货会主持词
2015/07/01 职场文书