zoukankan      html  css  js  c++  java
  • AngularJS--过滤器

    一、过滤器

      过滤器(filter):通过某种规则过滤一些数据,得到自己想要的结果。

      下面来讲一下AngularJS中的一些过滤器:

      1. currency(货币过滤器)

        用法:{{数字 | currency :“代表金钱的符号或者英文” :小数点后保留几位(会四舍五入)}}

        举例:{{1000|currency:“¥”:2}} 

        结果:¥1,000.00

      2. date(日期)

        用法:{{时间|date:'时间的格式'}}

        举例:{{'1477838110579'|date:'yyyy-MM-dd hh:mm:ss EEEE'}}

        结果:2016-10-30 10:35:10 Sunday

      3. json(json格式)

        用法:{{json数据|json}}

        举例:<pre>{{friends|json}}</pre>

    <script>
        var app=angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            $scope.friends=[
                {name:"John",phone:"555-1276"},
                {name:"Mark",phone:"655-1276"},
                {name:"Annie",phone:"955-1276"},
                {name:"Joe",phone:"255-1276"},
                {name:"Tom",phone:"655-1276"},
                {name:"Lilie",phone:"855-1276"},
            ]
        })
    </scripe>

        结果:

    [
      {
        "name": "John",
        "phone": "555-1276"
      },
      {
        "name": "Mark",
        "phone": "655-1276"
      },
      {
        "name": "Annie",
        "phone": "955-1276"
      },
      {
        "name": "Joe",
        "phone": "255-1276"
      },
      {
        "name": "Tom",
        "phone": "655-1276"
      },
      {
        "name": "Lilie",
        "phone": "855-1276"
      }
    ]

      4. limitTo(限制个数)

        用法:{{数字/字符串/数组 | limitTo:3:1}}

        举例:{{[1,2,3,4,5,6,7,8]|limitTo:3:1}}

        结果:[2,3,4]

      5. lowercase(转小写)、uppercase(转大写)

        用法:{{‘String’ | lowercase/uppercase}}

        举例:{{"aaa"|uppercase}}

        结果:AAA

      6. number(数字过滤器)

        用法:{{数字 | number:小数点位数(会四舍五入)}}

        举例:{{1000|number:4}}

        结果:1,000.0000

      7. filter (筛选)

        用法:{{数据 | filter:{条件}}}

        举例:

    <ul>
        <li ng-repeat="item in friends|filter:{name:'J'}">
            <span>{{item.name}}</span>
            <span>{{item.phone}}</span>
        </li>
    </ul>

        结果:

    • John 555-1276
    • Joe 255-1276

        说明:{name:"J"}数目只对name属性进行筛选,且筛选属性值中包含J的项

      8. orderBy(排序)

        用法:  {{数据 | orderBy :条件}}

    <ul>
        <li ng-repeat="item in friends|orderBy:'-phone'">
            <span>{{item.name}}</span>
            <span>{{item.phone}}</span>
        </li>
    </ul>

         结果:

    • Annie 955-1276
    • Lilie 855-1276
    • Mark 655-1276
    • Tom 655-1276
    • John 555-1276
    • Joe 255-1276

      说明:'-phone'表示 从大到小排序 ‘phone’则为从小到大

      

    二、自定义过滤器

      

    <script>
        var app=angular.module("myApp",[]);
        //过滤器的名称  function
        app.filter('myFilter',function(){
            //data是传过来的数据
            return function(data){
                return data.toUpperCase();
            }
        })
        app.controller("myCtrl",function($scope,$filter){
            //过滤器名称  要过滤的数据
            $scope.text=$filter("myfilter")("bbb");
        })
    </script>
  • 相关阅读:
    P3275 [SCOI2011]糖果 题解
    hdu 2962 题解
    hdu 2167 题解
    hdu 2476 题解
    hdu 5418 题解
    2019.10.16&17小结
    poj 3061 题解(尺取法|二分
    poj 1852&3684 题解
    NOIP2017[提高组] 宝藏 题解
    一类经典问题的解法
  • 原文地址:https://www.cnblogs.com/AnnieShen/p/6014394.html
Copyright © 2011-2022 走看看