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);

              }

            }

          });     //将字符串的一个字母转化为大写的过滤器;

时间: 2024-08-08 05:37:36

AangularJS过滤器详解的相关文章

HTML5移动开发之路(35)——jQuery中的过滤器详解

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(35)--jQuery中的过滤器详解 1.基本过滤选择器 :first:last:not(selector) :selector匹配的节点之外的节点:even :偶数:odd :奇数:eq(index):gt(index) :比他大的 :lt(index) :比他小的 [html] view plain copy print? <html> <head> <script src=&quo

过滤器详解

过滤器详解 注:继承接口的过滤器需要先继承 FilterAttribute类才行 过滤器头部      [AttributeUsage(AttributeTargets.Method, AllowMultiple = true,Inherited=true)] (1)validOn使用按位"或"运算符组合的一组值,用于指示哪些程序元素是有效的.可以是:程序集.字段.事件.方法.模块.参数.属性.返回值.类型. (2)AllowMultiple 附加属性,它表示是否允许将定制特性的实例多

angular-ngSanitize模块-linky过滤器详解

本篇主要讲解angular中的linky这个过滤器.此过滤器依赖于ngSanitize模块. linky能找出文本中的链接,然后把它转换成html链接.什么意思,就是说,一段文本里有一个链接,但是这个链接没有被a标签嵌套,linky能把它找出来,然后给它加上a标签并且给a链接添加正确的href属性,还可以设置打开的方式(_blank,_self,等...). 它查找链接是根据这些关键词来的: http/https/ftp/mailto/,或者就直接是一个email地址. 下面来看栗子: html

MVC过滤器详解

APS.NET MVC中(以下简称“MVC”)的每一个请求,都会分配给相应的控制器和对应的行为方法去处理,而在这些处理的前前后后如果想再加一些额外的逻辑处理.这时候就用到了过滤器. MVC支持的过滤器类型有四种,分别是:Authorization(授权),Action(行为),Result(结果)和Exception(异常).如下表, 过滤器类型 接口 描述 Authorization IAuthorizationFilter 此类型(或过滤器)用于限制进入控制器或控制器的某个行为方法 Exce

Filter过滤器详解(转)

web.xml中元素执行的顺序listener->filter->struts拦截器->servlet. 1.过滤器的概念 Java中的Filter 并不是一个标准的Servlet ,它不能处理用户请求,也不能对客户端生成响应. 主要用于对HttpServletRequest 进行预处理,也可以对HttpServletResponse 进行后处理,是个典型的处理链. 优点:过滤链的好处是,执行过程中任何时候都可以打断,只要不执行chain.doFilter()就不会再执行后面的过滤器和请

kuangkro MVC过滤器详解

http://www.cnblogs.com/xlhblogs/p/3349972.html 今天面试问到了mvc的过滤器 . actionreslut的类型 操作结果 帮助器方法 描述 ViewResult View 将视图呈现为网页. PartialViewResult PartialView 呈现分部视图,该分部视图定义可呈现在另一视图内的某视图的一部分. RedirectResult Redirect 使用其 URL 重定向到另一操作方法. RedirectToRouteResult R

MVC过滤器详解和示例

原文  http://blog.csdn.net/ankeyuan/article/details/29624005 MVC过滤器一共分为四个:ActionFilter(方法过滤器),ResultFilter(结果过滤器,感觉不是很好听,就这样叫吧),AuthorizationFilter(授权过滤器),ExceptionFilter(异常处理过滤器) 过滤器类型 接口 默认实现 描述 Action IActionFilter ActionFilterAttribute 在动作方法之前及之后运行

javaweb之Filter过滤器详解

快速入门 1.新建一个类,实现Filter接口 2.实现doFilter()方法,打印一句话,来证明能够进行拦截 3.在web.xml中进行配置(参照Servlet配置) 4.访问一个页面,看看能不能拦截 例子: import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.serv

AngularJS开发指南13:AngularJS的过滤器详解

AngularJS过滤器是用来格式化输出数据的.除了格式化数据,过滤器还能修改DOM.这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作. 比如,你可能有些数据在输出之前需要根据进行本地化.你可以向下面这样使用链式的过滤器来传递表达式: name | uppercase 这个表达式执行时会将name的值传递给uppercase过滤器. 写一个你自己的过滤器非常容易:在你的模块中注册一个新的过滤器(可注入的)工厂函数就行了.这个工厂函数必须返回一个新的过滤器函数,这个过滤函数的第一个参