AangularJS过滤器详解
(参考angular权威指南)
过滤器: 用来格式化需要展示给用户的数据;
使用过滤器的方式:
(1)$scope.name=$filter("lowercase").("Ariarme");
(2)以HTML形式使用过滤器:如果传递参数只要在过滤器名字后面加冒号,有多个参数,可以在每个参数后面都加入冒号;
{{123.456789 | number:2}} 限制小数点的位数-----显示为123.46(四舍五入)
(3)用 | 符号作为分隔符来同时使用多个过滤器;
AngularJS提供的内置过滤器:
currency : 将一个数值格式化为货币格式,用{{123 | currency}} 将123转化成货币格式;
它允许我们自己设置货币符号:如 {{123 | currency : "¥"}} 显示为¥123.00.00;
date: 可以将日期格式化成需要的格式;
内置的支持本地化的日期格式:
{{today | date 'medium'}} Aug 09,2014 9:45:08 AM
{{today | date 'short'}} 8/9/14 9:45AM
{{today | date 'fullDate'}} Thursday,August 09,2014
{{today | date 'longDate'}} August 09,2014
{{today | date 'mediumDate'}} Aug 09,2014
{{today | date 'shorDate'}} 8/9/14
{{today | date 'mediumTime'}} 9:45:08 AM
{{today | date 'shortTime'}} 9:45 AM;
年份格式化:
四位年份:{{today | date 'yyyy’}} 2017
两位年份:{{today | date 'yy‘}} 17
一位年份:{{today | date 'y‘}} 2017
月份格式化:
英文月份:{{taday |date:'MMMM'}} August
英文月份j简写 {{taday |date:'MMM'}} Aug
数字月份:{{taday |date:'MM'}} 08
一个月中第几个月份::{{taday |date:'M'}} 8
日期格式化:
数字日期:{{today | date:'dd'}} 22
一个月中的第几天:{{today | date:'d'}} 22
英文星期: {{today | date:'EEEE'}} Thrusday
英文星期简写:{{today | date:'EEE'}}Thu
小时格式化:
24小时制数字小时:{{today | date:'HH'}} 00
一天中的第几个小时:{{today | date: 'H'}} 0
12小时制数字小时:{{today | date:'hh'}} 12
上午或下午的第几个小时::{{today | date:'h'}} 12
分钟格式化:
数字分钟数:{{today | date : 'mm'}} 05
一个小时的第几分钟:{{today | date : 'm'}} 5
秒数格式化:
数字秒数:{{today | date 'ss'}} 09
一分钟内的第几秒:{{today | date 's'}} 9
毫秒数:{{today | date 'sss'}}
字符格式化:
上下午标示:{{today | date: 'a'}} AM
四位时区标示:{{today | date 'Z'}} 0700
自定义日期格式:
{{today | date:'hh:mm:ss'}} 23:15:40
{{today | date:'yyyy-MM-dd hh:mm:ss'}} 2017 -5-22 23:15:40
filter: 可以从给定数组中选择一个子集,并将其生成一个新数组返回;通常过滤需要进行展示的元素;
参数:第一个参数可以是 字符串、对象、或是一个用来从数字中选择元素的函数;
第二个参数用来指定预期同实际值进行比较的方式;
参数设置为true: 表示用angular.equals(expected,actual)对两个值进行严格比较;
参数设置为false:进行区分大小写的子字符串比较;
参数设置为函数:运行这个函数,如果返回真值就接受这个元素;
json: 可以将一个JSON或JavaScript对象转化成字符串;
limitTo: 过滤器根据传入的参数生成一个新的数组或字符串,新的数组或字符串的长度取决于传入的参数,通过传入的参数的正负来控制从前面还是从后面开始截取;
lowercase: 过滤器将字符串转化为小写;
uppercase: 过滤器将字符串转化为大写;
number: 将数字格式化成文本,第二个参数可选,用来控制截取小数点的位数,如果传入的是非数字字符,会返回空字符串;
{{123456789 | number}} 1,234,567,890
{{1.23456789 | number:2}} 1.23
orderBy:过滤器可以用表达式对指定的数组进行排序,它接受两个参数,第一个是必须的,第二个是可选的,控制排序的方向,第二个参数设置为true,排序反转;
例如:{{--- | orderBy:'name':true}}
使用+是升序,-是降序;orderBy:'- age';按年龄的降序排列;
自定义过滤器:
自定义过滤器创建是非常容易的,本质上市会把我们输入的内容当作参数传入进去的函数;
列子: angular.module('mainApp',[]).filter('capitlize',function(){
return function(input){
if(input){
return input[0].toUpperCase() + input.slice(1);
}
}
}); //将字符串的一个字母转化为大写的过滤器
AangularJS过滤器详解的更多相关文章
- MVC过滤器详解
MVC过滤器详解 APS.NET MVC中(以下简称"MVC")的每一个请求,都会分配给相应的控制器和对应的行为方法去处理,而在这些处理的前前后后如果想再加一些额外的逻辑处理. ...
- Asp.Net MVC学习总结之过滤器详解(转载)
来源:http://www.php.cn/csharp-article-359736.html 一.过滤器简介 1.1.理解什么是过滤器 1.过滤器(Filters)就是向请求处理管道中注入额外的 ...
- Wireshark过滤器详解
Wireshark过滤器详解 1.Wireshark主要提供两种主要的过滤器 捕获过滤器:当进行数据包捕获时,只有那些满足给定的包含/排除表达式的数据包会被捕获 显示过滤器:该过滤器根据指定的表达式用 ...
- angular-ngSanitize模块-linky过滤器详解
本篇主要讲解angular中的linky这个过滤器.此过滤器依赖于ngSanitize模块. linky能找出文本中的链接,然后把它转换成html链接.什么意思,就是说,一段文本里有一个链接,但是这个 ...
- shell sed过滤器详解
1. Sed简介sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为"模式空间"(pattern space),接着用sed命令处理缓冲区中 ...
- Java 中的 Filter 过滤器详解
Filter简介 Filter也称之为过滤器,它是Servlet技术中最实用的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件 ...
- MVC过滤器详解 面向切面编程(AOP)
面向切面编程:Aspect Oriented Programming(AOP),面向切面编程,是一个比较热门的话题.AOP主要实现的目的是针对业务处理过程中的切面进行提取,它所面对的是处理过程中的某个 ...
- AngularJS开发指南13:AngularJS的过滤器详解
AngularJS过滤器是用来格式化输出数据的.除了格式化数据,过滤器还能修改DOM.这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作. 比如,你可能有些数据在输出之前需要根据进行本地化 ...
- ASP.NET MVC 过滤器详解
http://www.fwqtg.net/asp-net-mvc-%E8%BF%87%E6%BB%A4%E5%99%A8%E8%AF%A6%E8%A7%A3.html 我经历了过滤器的苦难,我想到了还 ...
随机推荐
- 读书笔记 C# yield return与yield break执行顺序的浅析
yield return可一次返回一个元素,并保留当前在代码中的位置,下次调用当前迭代器函数时,将从该位置从新执行.也就是说执行了yield return的时候,迭代器函数就返回了一个元素给forea ...
- error: illegal character '\ufeff' 的解决方案
今天使用scalac 命令编译scala文件的时候,出错了,出现如下错误提示:
- linux 创建安装redis服务
1.找下redis的官方的下载地址:http://download.redis.io/releases/redis-3.2.8.tar.gz 有最新的就下载最新 先下载解压跟安装 wget http ...
- 编译varnish 报No package 'libpcre' found
pcre的lib目录未指定 假如安装pcre的目录为/usr/local/pcre 那么lib目录为/usr/local/pcre/lib export PKG_CONFIG_PATH=/usr/lo ...
- AntPathMatcher做路径匹配
转发自: http://www.cnblogs.com/leftthen/p/5212221.html 需要看详细的请看上面的链接 这里以我这里的一个Filter 中需要对路径做例外处理,filter ...
- NioEventLoopGroup的构造函数
loop是对thread的封装,里面记录一个selector 一套打完,看下来,就是loopgroup里面一个loop的数组,每一个loop在 new的时候,传入了selector(第二个箭头), 第 ...
- PCP架构设计
1.引言 现如今已经进入互联网时代,无论是工作还好娱乐都已经离不开互联网,与此同时,网络相关的问题也时不时的侵扰着我们,这需要我们具有一定网络相关知识来解决相关问题,而这时,一款工作便利,免费的网络分 ...
- Android:DELETE_FAILED_INTERNAL_ERROR Error while Installing APKs
Android studio DELETE_FAILED_INTERNAL_ERROR Error while Installing APKs 一.报错信息 DELETE_FAILED_INTERN ...
- MySQL:数据表基本操作
数据表基本操作 注意点: 1.数据表中已经有数据时,轻易修改数据类型,有可能因为不同的数据类型的数据在机器 中存储的方式及长度并不相同,修改数据类型可能会影响到数据表中已有的数据类型. 2. 数据表 ...
- xampp 忘记密码的处理方式.
网上看到一些方法: 大部分是第一种: 方法一 这个方法, 我使用的时候没有生效. -------------- 后来看到另外一种方法 . 直接替换user表的三个文件. 这个方法成功了. xam ...