• 过滤器


    在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器

    以HTML的形式使用过滤器时,如果需要传递参数给过滤器,只要在过滤器名字后面加冒号
    即可。如果有多个参数,可以在每个参数后面都加入冒号。

    AngularJS提供的内置过滤器
    1. currency
    currecy过滤器可以将一个数值格式化为货币格式。用{{ 123 | currency }}来将123转化
    成货币格式。
    currecy过滤器允许我们自己设置货币符号。默认情况下会采用客户端所处区域的货币符号,
    但是也可以自定义货币符号。
    2. date
    date过滤器可以将日期格式化成需要的格式。AngularJS中内置了几种日期格式,如果没有
    指定使用任何格式,默认会采用mediumDate格式,下面的例子中展示了这个格式。
    下面是内置的支持本地化的日期格式:

    {{ today | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM -->
    {{ today | date:'short' }} <!-- 8/9/1312:09PM -->
    {{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 -->
    {{ today | date:'longDate' }} <!-- August 09, 2013 -->
    {{ today | date:'mediumDate' }}<!-- Aug 09, 2013 -->
    {{ today | date:'shortDate' }} <!-- 8/9/13 -->
    {{ today | date:'mediumTime' }}<!-- 12:09:02 PM -->
    {{ today | date:'shortTime' }} <!-- 12:09 PM -->
     年份格式化
    四位年份:{{ today | date:'yyyy' }} <!-- 2013 -->
    两位年份:{{ today | date:'yy' }} <!-- 13 -->
    一位年份:{{ today | date:'y' }} <!-- 2013 -->
     月份格式化
    英文月份:{{ today | date:'MMMM' }} <!-- August -->
    英文月份简写:{{ today | date:'MMM' }} <!-- Aug -->
    数字月份:{{ today |date:'MM' }} <!-- 08 -->
    一年中的第几个月份:{{ today |date:'M' }} <!-- 8 -->
     日期格式化
    数字日期:{{ today|date:'dd' }} <!-- 09 -->
    一个月中的第几天:{{ today | date:'d' }} <!-- 9 -->
    英文星期:{{ today | date:'EEEE' }} <!-- Thursday -->
    英文星期简写:{{ 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' }} <!-- 09 -->
    一个小时中的第几分钟:{{ today | date:'m' }} <!-- 9 -->
     秒数格式化
    数字秒数:{{ today | date:'ss' }} <!-- 02 -->
    一分钟内的第几秒:{{ today | date:'s' }} <!-- 2 -->
    毫秒数:{{ today | date:'.sss' }} <!-- .995 -->
     字符格式化
    上下午标识:{{ today | date:'a' }} <!-- AM -->
    四位时区标识:{{ today | date:'Z' }} <!--- 0700 -->
    下面是一些自定义日期格式的示例:
    {{ today | date:'MMMd, y' }} <!-- Aug9, 2013 -->
    {{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8-->
    {{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 -->
    3. filter
    filter过滤器可以从给定数组中选择一个子集,并将其生成一个新数组返回。这个过滤器通

    常用来过滤需要进行展示的元素。例如,在做客户端搜索时,可以从一个数组中立刻过滤出所需
    的结果。
    这个过滤器的第一个参数可以是字符串、对象或是一个用来从数组中选择元素的函数。
    下面分情况介绍传入不同类型的参数。
     字符串
    返回所有包含这个字符串的元素。如果我们想返回不包含该字符串的元素,在参数前加!
    符号。
     对象
    AngularJS会将待过滤对象的属性同这个对象中的同名属性进行比较,如果属性值是字符串
    就会判断是否包含该字符串。如果我们希望对全部属性都进行对比,可以将$当作键名。
     函数
    对每个元素都执行这个函数,返回非假值的元素会出现在新的数组中并返回。
    例如,用下面的过滤器可以选择所有包含字母e的单词:
    {{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}
    <!-- ["Lerner","Likes","Eat"] -->
    如果要过滤对象,可以使用上面提到的对象过滤器。例如,如果有一个由people对象组成的
    数组,每个对象都含有他们最喜欢吃的食物的列表,那么可以用下面的形式进行过滤:

    {{ [{
    'name': 'Ari',
    'City': 'San Francisco',
    'favorite food': 'Pizza'
    },{
    'name': 'Nate',
    'City': 'San Francisco',
    'favorite food': 'indian food'
    }] | filter:{'favorite food': 'Pizza'} }}
    <!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->
    也可以用自定义函数进行过滤(在这个例子中函数定义在$scope上):
    {{ ['Ari','likes','to','travel'] | filter:isCapitalized }}
    <!-- ["Ari"] -->
    isCapitalized函数的功能是根据首字母是否为大写返回true或false,具体如下所示:
    $scope.isCapitalized = function(str) {
    return str[0] == str[0].toUpperCase();
    };
    我们也可以给filter过滤器传入第二个参数,用来指定预期值同实际值进行比较的方式。
    第二个参数可以是以下三种情况之一。
     true
    用angular.equals(expected, actual)对两个值进行严格比较。

     false
    进行区分大小写的子字符串比较。
     函数
    运行这个函数,如果返回真值就接受这个元素。
    4. json
    json过滤器可以将一个JSON或JavaScript对象转换成字符串。这种转换对调试非常有帮助:
    {{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }}
    <!--
    {
    "name": "Ari",
    "City": "San Francisco"
    }
    -->
    5. limitTo
    limitTo过滤器会根据传入的参数生成一个新的数组或字符串,新的数组或字符串的长度取
    决于传入的参数,通过传入参数的正负值来控制从前面还是从后面开始截取。
    如果传入的长度值大于被操作数组或字符串的长度,那么整个数组或字符串都会被
    返回。
    例如,我们可以截取字符串的前三个字符:

    {{ San Francisco is very cloudy | limitTo:3 }}
    <!-- San -->
    或最后的六个字符:
    {{ San Francisco is very cloudy | limitTo:-6 }}
    <!-- cloudy -->
    对数组也可以进行同样的操作。返回数组的第一个元素:
    {{ ['a','b','c','d','e','f'] | limitTo:1 }}
    <!-- ["a"] -->
    6. lowercase
    lowercase过滤器将字符串转为小写。
    {{ "San Francisco is very cloudy" | lowercase }}
    <!-- san francisco is very cloudy -->
    7. number
    number过滤器将数字格式化成文本。它的第二个参数是可选的,用来控制小数点后截取的位数。
    如果传入了一个非数字字符,会返会空字符串。
    {{ 123456789 | number }}
    <!-- 1,234,567,890 -->

    {{ 1.234567 | number:2 }}
    <!-- 1.23 -->
    8. orderBy
    orderBy过滤器可以用表达式对指定的数组进行排序。
    orderBy可以接受两个参数,第一个是必需的,第二个是可选的。
    第一个参数是用来确定数组排序方向的谓词。
    下面分情况讨论第一个参数的类型。
     函数
    当第一个参数是函数时,该函数会被当作待排序对象的getter方法。
     字符串
    对这个字符串进行解析的结果将决定数组元素的排序方向。我们可以传入+或-来强制进行升
    序或降序排列。
     数组
    在排序表达式中使用数组元素作为谓词。对于与表达式结果并不严格相等的每个元素,则使
    用第一个谓词。
    第二个参数用来控制排序的方向(是否逆向)。
    例如,我们将下面的对象数组用name字段进行排序:

    {{ [{
    'name': 'Ari',
    'status': 'awake'
    },{
    'name': 'Q',
    'status': 'sleeping'
    },{
    'name': 'Nate',
    'status': 'awake'
    }] | orderBy:'name' }}
    <!--
    [
    {"name":"Ari","status":"awake"},
    {"name":"Nate","status":"awake"},
    {"name":"Q","status":"sleeping"}
    ]
    -->
    也可以对排序结果进行反转。例如,通过将第二个参数设置为true可以将排序结果进行反转:
    {{ [{
    'name': 'Ari',
    'status': 'awake'
    },{
    'name': 'Q',
    'status': 'sleeping'
    },{
    'name': 'Nate',

    'status': 'awake'
    }] | orderBy:'name':true }}
    <!--
    [
    {"name":"Q","status":"sleeping"},
    {"name":"Nate","status":"awake"},
    {"name":"Ari","status":"awake"}
    ]
    -->
    9. uppercase
    uppercase过滤器可以将字符串转换为大写形式:
    {{ "San Francisco is very cloudy" | uppercase }}
    <!-- SAN FRANCISCO IS VERY CLOUDY -->

  • 相关阅读:
    Java 上传文件总结
    Java和C# MD5加密比较
    ORM映射框架总结数据操作(七)
    ORM映射框架总结数据操作(五)
    ORM映射框架总结数据操作(一)
    ORM映射框架总结数据操作(四)
    ORM映射框架总结数据操作(六)
    ORM映射框架总结文件下载
    STM32USART DMA_Interrupt例程的学习
    开始STM32的学习
  • 原文地址:https://www.cnblogs.com/cing/p/6912869.html
Copyright © 2020-2023  润新知