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

                  }

                }

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

  • 相关阅读:
    Git 学习小问题记录
    Spring缓存源码剖析:(一)工具选择
    最佳线程数
    Python 装饰器备忘
    使用SCSS扩展Bootstrap4
    Flask 路由相关操作
    Flask开发环境搭建
    Python数据分析开发环境
    Python中的矩阵操作
    Windows 安装 MySQL 8.0.11
  • 原文地址:https://www.cnblogs.com/liaolei1/p/6888554.html
Copyright © 2020-2023  润新知