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,过滤器,顾名思义,即是对数据等的过滤,预处理过程.为什么要引入过滤器呢?在平常访问网站的时 ...
随机推荐
- 十九、mysql 数据分布式
1.RAID 廉价磁盘冗余阵列 2.Symbolic links 通俗易懂的说就是通过连接符指向的操作,人为的将某些数据库分布到其他的文件夹/磁盘上 Linux: Mysql DATA路径:/opt/ ...
- Xcode常用设置
1.设置主题和字体大小 2.设置显示代码行号
- 【BZOJ 2730】 [HNOI2012]矿场搭建
Description 煤矿工地可以看成是由隧道连接挖煤点组成的无向图.为安全起见,希望在工地发生事故时所有挖煤点的工人都能有一条出路逃到救援出口处.于是矿主决定在某些挖煤点设立救援出口,使得无论哪一 ...
- 常见架构TLB miss处理方法(转)
转自网站:http://blog.sina.com.cn/s/blog_633f462901018reb.html 0. 综述 总的来说TLB miss处理分为硬件处理和软件处理两种,硬件 ...
- dubbo zookeeper模型
本文摘自dubbo的官方文档,原文请参见: http://alibaba.github.io/dubbo-doc-static/User+Guide-zh.htm#UserGuide-zh-Zooke ...
- Excel 隐藏功能区命令
Application.ExecuteExcel4Macro "SHOW.TOOLBAR(""Ribbon"",False)"
- memcached 在window下的安装与使用
memcached搭建缓存系统 一.概念 Memcached是danga.com(运营LiveJournal的技术团队)开发的一套分布式内存对象缓存系统,用于在动态系统中减少数据库负载,提升性能. 二 ...
- EasyUI Datagrid 取编辑修改后的内容
<script type="text/javascript"> $(function () { $('#tt').datagrid({ iconCls: 'icon-e ...
- 关于hibernate中双向外键关联one-to-one的property-ref=的问题(转)
大家都知道hibernate中的one-to-one映射主要有两种策略,(1)一对一主键关联(单向和双向).(2)一对一外键映射(单项和双向).本文主要讲解一下,一对一外键映射中的双向问题,在此前先通 ...
- VIM的高级使用
VIM的高级使用 转:http://www.cnblogs.com/itech/archive/2012/02/22/2363111.html 1)一些常用的Vim配置,在~/.vimrc中 syn ...