angularjs filter 详解
系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点。这篇简单说一下angularjs的filter功能,angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的。
一,内置的过滤器
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详解
过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果. 主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等. ng内置了一些过滤器, ...
- css filter详解
css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...
- Spring Security Filter详解
Spring Security Filter详解 汇总 Filter 作用 DelegatingFilterProxy Spring Security基于这个Filter建立拦截机制 Abstract ...
- java web之Filter详解
java web之Filter详解 2012-10-20 0 个评论 作者:chenshufei2 收藏 我要投稿 .概念: Filter也称之为过滤器,它是Servlet技术中比较激动人心的技术,W ...
- Zuul之Filter详解
Zuul详解 官方文档:https://github.com/Netflix/zuul/wiki/How-it-Works Zuul的中心是一系列过滤器,能够在HTTP请求和响应的路由过程中执行一系列 ...
- AngularJS Providers 详解
供应者(Providers) Each web application you build is composed of objects that collaborate to get stuff d ...
- AngularJs MVC 详解
为什么在前端也需要MVC 1.代码规模越来越大,切分职责是大势所趋 2.为了复用 3.为了后期维护方便 MVC的目的是为了模块化和复用 前端实现MVC的困难 1.操作DOM必须等整个页面加载完 2.多 ...
- angularjs 指令详解 - template, restrict, replace
通过指令机制,angularjs 提供了一个强大的扩展系统,我们可以通过自定义指令来扩展自己的指令系统. 怎样定义自己的指令呢? 我们通过 Bootstrap UI来学习吧.这个项目使用 angula ...
- Servlet之Filter详解
参考文献:http://www.cnblogs.com/zlbx/p/4888312.html Filter,过滤器,顾名思义,即是对数据等的过滤,预处理过程.为什么要引入过滤器呢?在平常访问网站的时 ...
随机推荐
- (转)《深入理解java虚拟机》学习笔记7——Java虚拟机类生命周期
C/C++等纯编译语言从源码到最终执行一般要经历:编译.连接和运行三个阶段,连接是在编译期间完成,而java在编译期间仅仅是将源码编译为Java虚拟机可以识别的字节码Class类文件,Java虚拟机对 ...
- Mac OS X 10.10 Yosemite PHP 5.5.14 free type support fix
通过将php将至5.4来勉强支持freetype扩展,不推荐此方法 after upgrading to new Mac OS X Yosemite, i noticed that free type ...
- iOS本地动态验证码生成-b
用于ios本地动态生成验证码,效果如下: demo.gif 导入CoreGraphics.framework用于绘制图形 封装UIView,便捷使用,代码如下: AuthcodeView.h #imp ...
- cmp比较指令对标志寄存器的影响
比如: mov ax,x mov bx,y cmp ax,bx cmp ax,bx的逻辑含义是比较ax,bx中的值.如果执行后: ZF=1则AX=BX ZF=0则AX!=BX CF=1则AX<B ...
- 基于Oracle OCI的数据访问C语言接口ORADBI .
基于Oracle OCI的数据访问C语言接口ORADBI cheungmine@gmail.com Mar. 22, 2008 ORADBI是我在Oracle OCI(Oracle 调用接口)基础 ...
- 基于ASP.NET的comet简单实现
http://www.cnblogs.com/hanxianlong/archive/2010/04/27/1722018.html 我潜水很多年,今天忽然出现.很久没写过博客了,不是因为不想写,而是 ...
- Web开发的绝美网站
http://paranimage.com/ http://sixrevisions.com/graphics-design/
- 213. House Robber II
题目: Note: This is an extension of House Robber. After robbing those houses on that street, the thief ...
- 算法总结之欧拉函数&中国剩余定理
算法总结之欧拉函数&中国剩余定理 1.欧拉函数 概念:在数论,对正整数n,欧拉函数是少于或等于n的数中与n互质的数的数目. 通式:φ(x)=x(1-1/p1)(1-1/p2)(1-1/p3)( ...
- sudo: ./sd_fusing.sh:找不到命令
1. -----