zoukankan      html  css  js  c++  java
  • 第219天:Angular---过滤器

     在Angular中,过滤器的功能主要是格式化数据表达式,且可以自定义过滤器。作用域(scope)主要服务于页面模板,在控制器和页面中起桥梁作用,保存模板中的数据对象,为模板中的元素提供方法和属性。

    一、过滤器的表现形式

    在angular中有三种变现形式,通过管道字符 “  |  ”,与需要处理的代码进行连接,看代码:

    1、单个过滤器,如:{{表达式 | 过滤器名}}


    货币过滤器     {{8.88 | currency}}  // $8.88

    2、多个过滤器,如:{{表达式 | 过滤器名1 | 过滤器名2 | ...}}

       {{8.88 | currency | filter | ...}}

    3、带参数过滤器,如:{{表达式 | 过滤器名1 : 参数1 : 参数2 : ...}}

       {{8.88 | number : 1}}


    二、angular中自带的九种过滤器

    1、currency格式化数字为货币格式。

    1  {{  8.88 | currency  }}//  默认为$8.88
    2 
    3  {{  8.88 | currency  : "¥"}} // ¥8.88

    2、lowercase过滤器将字符串格式化为小写

    1 姓名为{{ lastName | lowercase }} // zhang    $scope.lastName="ZHANG"

    3、uppercase过滤器将字符串格式化为大写

    {{ lastName | uppercase }} // ZHANG    $scope.lastName="zhang"

    4、orderBy过滤器根据表达式排列数组

     1 // 根据id降序排序
     2 
     3 {{[{"age":20,"id":10,"name":"iphone"},
     4 
     5 {"age":12,"id":11,"name":"sunm xing"},
     6 
     7 {"age":44,"id":12,"name":"test abc"}]
     8 
     9 |   orderBy:'id':true}}
    10 
    11 // 根据id升序排序
    12 
    13 {{[{"age":20,"id":10,"name":"iphone"},
    14 
    15 {"age":12,"id":11,"name":"sunm xing"},
    16 
    17 {"age":44,"id":12,"name":"test abc"}]
    18 
    19 |   orderBy:'id'}}

    5、filter查找

    1 // 查找name为iphone的行
    2 
    3 {{[{"age":20,"id":10,"name":"iphone"},
    4 
    5 {"age":12,"id":11,"name":"sunm xing"},
    6 
    7 {"age":44,"id":12,"name":"test abc"}]
    8 
    9 |filter:{'name':'iphone'}}}//输出的话就是{"age":20,"id":10,"name":"iphone"}

    6、limitTo 截取

    1 {{"1234567890"|limitTo:6}}// 从前面开始截取6位
    2 
    3 {{"1234567890"|limitTo:-4}}// 从后面开始截取4位

    7、date 时间格式化

    1 {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss" }}// 2017-03-22 13:52:25

    8、number 格式化(保留小数)

    1 {{149016.1945000|number:2}}   //149016.19

    9、 json   (格式化json对象)

    json过滤器可以把一个js对象格式化为json字符串,没有参数。这东西有什么用呢,我一般也不会在页面上输出一个json串啊,官网说它 可以用来进行调试,嗯,是个不错的选择。或者,也可以用在js中使用,作用就和我们熟悉的JSON.stringify()一样。用法超级简单:


    1 {{ jsonTest | json}}

    三、angular自定义过滤器

    方法:

    1 app.filter('name', function() {
    2 
    3         return function(input, char) {
    4 
    5              return  自定义你的过滤器
    6 
    7       }
    8 
    9 }
     1 app.filter('capitalize', function() {
     2 
     3       //input 需要过滤的元素
     4 
     5       //char位置,索引减一
     6 
     7        return function(input, char) {
     8 
     9          if(isNaN(input)) {
    10 
    11                   //如果序号位置没有设置,索引位置默认是0
    12 
    13                    var char = char - 1 || 0;
    14 
    15                    //把过滤元素索引位置上的字母转换成大写
    16 
    17                    var letter = input.charAt(char).toUpperCase();
    18 
    19                    var out = [];
    20 
    21                    for(var i = 0; i < input.length; i++) {
    22 
    23                       if(i == char) {
    24 
    25                            out.push(letter);
    26 
    27                       } else {
    28 
    29                               out.push(input[i]);
    30 
    31                         }
    32 
    33                    }
    34 
    35                         return out.join('');
    36 
    37                       } else {
    38 
    39                            return input;
    40 
    41                         }
    42 
    43                   }
    44 
    45 });


  • 相关阅读:
    Dependency property changed example
    业务数据分析
    WPF : 以鼠标指针为中心缩放
    WPF待学习问题列表(未完)
    GirdView前台数据类型转换
    牛人的博客
    使用Xpath对XML进行模糊查询
    XPath语法
    【HDU】3415 Max Sum of MaxKsubsequence
    【HDU】3474 Necklace
  • 原文地址:https://www.cnblogs.com/le220/p/8876510.html
Copyright © 2011-2022 走看看