码迷,mamicode.com
首页 > Web开发 > 详细

AangularJS过滤器详解

时间:2017-05-23 23:45:40      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:年龄   span   cti   通过   sda   font   自己   本质   个数   

(参考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过滤器详解

标签:年龄   span   cti   通过   sda   font   自己   本质   个数   

原文地址:http://www.cnblogs.com/liaolei1/p/6888554.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!