• 过滤器


    1. currency
    currecy过滤器可以将一个数值格式化为货币格式。用{{ 123 | currency }}来将123转化
    成货币格式。

    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' }}

    一个月中的第几天:{{ 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方法。
     字符串
    对这个字符串进行解析的结果将决定数组元素的排序方向。我们可以传入+或-来强制进行升
    序或降序排列。
     数组
    在排序表达式中使用数组元素作为谓词。对于与表达式结果并不严格相等的每个元素,则使
    用第一个谓词。

     函数
    当第一个参数是函数时,该函数会被当作待排序对象的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 -->

    7.1 自定义过滤器

    正如前面所见,创建自定义过滤器非常容易。创建自定义过滤器需要将它放到自己的模块中。
    下面我们一起来实现一个过滤器,将字符串第一个字母转换为大写。
    首先,创建一个模块用以在应用中进行引用(这是一个非常好的实践):
    angular.module('myApp.filters', [])
    .filter('capitalize', function() {
    return function(input) {};
    });
    过滤器本质上是一个会把我们输入的内容当作参数传入进去的函数。上面这个例子中,我们
    在调用过滤器时简单地把input当作字符串来处理。可以在这个函数中做一些错误检查:
    angular.module('myApp.filters', [])
    .filter('capitalize', function() {
    return function(input) {
    // input是我们传入的字符串
    if (input) {
    return input[0].toUpperCase() + input.slice(1);
    }
    });

    现在,如果想将一个句子的首字母转换成大写形式,可以用过滤器先将整个句子都转换成小
    写,再把首字母转换成大写:
    <!-- Ginger loves dog treats -->
    {{ 'ginger loves dog treats' | lowercase | capitalize }}

  • 相关阅读:
    HDU 2888 Check Corners (模板题)【二维RMQ】
    POJ 3264 Balanced Lineup(模板题)【RMQ】
    poj 3368 Frequent values(经典)【RMQ】
    SPOJ RPLN (模板题)(ST算法)【RMQ】
    UVA 796 Critical Links(模板题)(无向图求桥)
    UVA 315 Network (模板题)(无向图求割点)
    POJ 2029 Get Many Persimmon Trees (模板题)【二维树状数组】
    poj 3067 Japan 【树状数组】
    POJ 2481 Cows 【树状数组】
    POJ 1195 Mobile phones【二维树状数组】
  • 原文地址:https://www.cnblogs.com/muliu/p/6089431.html
Copyright © 2020-2023  润新知