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,过滤器,顾名思义,即是对数据等的过滤,预处理过程.为什么要引入过滤器呢?在平常访问网站的时 ...
随机推荐
- RCP学习笔记
一些model特征: Trimmed Window: 带最小化最大化的窗体 Perspective Stack: 装载Perspective的容器 Perspective:一个透视,可以直接包含Par ...
- 使用plspl创建orcale作业
1.由于权限问题,第一步应先以sys账户登录,路径:工具->DBMS 调试程序->作业 ,新建一个作业,出现如下图的窗口 2.开始依次填写相应内容,Name为作业名字,注意要加上用户名前 ...
- Javacript 客户端保存数据[ locaStorage ]
1.通常程序员们会使用Cookie进行一些小量的数据储存在客户端浏览器,但孰不知这样会造成不必要的带宽浪费 ,可使用 js 中的 locaStorage 来替代cookie进行存储,但不支持IE8以下 ...
- MyEclipse 8.5配置Tomcat7.0
MyEclipse 8.5配置默认没有Tomcat7.0, 如果想使用怎么办.? window>>Preferences>>MyEclipse Enterprise Workb ...
- 一种高斯模糊渐变动画的实现-b
关于高斯模糊的方式有很多种,但是如果需要模糊渐变,那么对这种高斯模糊算法的性能要求是比较高的,今天这里重点不讨论算法,只是提供一个动画实现的思路.动画效果如下: 高斯模糊渐变动画 //高斯模糊 -(U ...
- Sublime Text 3 安装及简单配置
Sublime Text 3, 一款不错的文本编辑器, 加上各种插件和IDE就能化身各种语言的编译器, 界面以及多种插件的灵活组合搭配更是让程序员们在码代码这种枯燥的生活中增加一点调剂. 下载地址 点 ...
- AnimateWindow 阻塞当前线程问题
今天查了蛮多的,虽然不是系统的学习,收获也不小.下面说一下我的解决方法: 问题一:采用 AnimateWindow API实现消息窗体FormMsg的动画出现,但由于该方法会阻塞当前线程,造成其他窗体 ...
- 使用C#选择文件夹、打开文件夹、选择文件
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- Visual Leak Detector 2.2.3 Visual C++内存检测工具
Visual Leak Detector是一款免费的.健全的.开源的Visual C++内存泄露检测系统.相比Visual C++自带的内存检测机制,Visual Leak Detector可以显 ...
- cocos2d-x 扩充引擎基类功能 引起的头文件重复包含问题的分析
c++ 头文件包含 原因的分析: c++ 头文件的循环引用是指: .h 里面的里面的头文件的相互包含的,引起的重复引用的问题.cpp 里面包含头文件是不存在重复引用的问题(因为CPP没有#ifn ...