Angular 过滤器filter

1、过滤器是对数据进行筛选/处理，在数据展示时使用；过滤器可以使用一个管道字符（|）添加到表达式和指令中。
     语法： {{ data | filter名称:参数 }}
              {{expression | filter1 |filter2 |…}}

    <!--货币过滤器
        currency  currency:"¥"格式化数字为货币格式。
    -->
    <h2>{{money | currency:'￥' }}</h2>
    <h2>{{money | currency:'$' }}</h2>

    <!-- 日期过滤器
        date:'yyyy/MM/dd hh:mm:sss'
    -->
    <h3>{{time | date:'yyyy/MM/dd hh:mm:ss' }}</h3>
    <h3>{{time | date:'yyyy-MM-dd HH:mm:ss' }}</h3>
    <h3>{{time | date:'yyyy-MM-dd a HH:mm:ss' }}</h3>

    <!-- 
        大小写转换
            lowercase
            uppercase

     -->
     <p> {{'Hello' | lowercase}}</p>
     <p> {{'hello' | uppercase}}</p>

    <script>
        var app=angular.module('app',[]);
        app.controller('main',['$scope',function($scope){      
            $scope.money='9999.88';
            //时间
            $scope.time=new Date().getTime();
        }])
    </script>

2、自定义过滤器：

       调用：
                {{ date |  名称 }}
       语法：模型.filter('名称',function(){
                      return function(input){
                      }
                   })
       说明：①.return 的函数是定义过滤功能的地方
                  ②.return 的函数中有一个默认的参数(input)，这个参数代表的是调用这个过滤器的数据， 如果有其他参数，可以在后面继续写

    <h2>{{ str | qufan }}</h2>
    <script>
        var app=angular.module('app',[]);
        app.controller('main',['$scope',function($scope){     
            $scope.str='hello world';
        }]) 
        //自定义过滤器---字符串取反
        app.filter('qufan',function(){
            return function(can){//can  参数
                //.....处理中...               
                 return can.split('').reverse().join('');//dlrow olleh
            }
        })
    </script>

3、 多级过滤器：

     filter用来处理一个数组，然后可以过滤出含有某个子串的元素，作为一个子数组来返回。

 <p>匹配数组里面含o制字符的内容 </p>
    <ul>
        <li ng-repeat='item in arr | filter:"e"'>{{ item }}</li>
    </ul>

    <p>匹配属性值中包含'张'的所有项</p>
    <ul>
        <li ng-repeat='item in arrList | filter:"张"'>
            <p>{{item.id}}</p>
            <p>{{item.name}}</p>
            <p>{{item.age}}</p>
        </li>
    </ul>

    <p>匹配age属性值 大于 30的项</p>

        <ul>
            <li ng-repeat='item in arrList | filter:maxAge'>
                <p>{{item.id}}</p>
                <p>{{item.name}}</p>
                <p>{{item.age}}</p>
            </li>
        </ul>

        var app=angular.module('app',[]);
        app.controller('main',['$scope',function($scope){     
            //数组
            $scope.arr=['how','are','you','love','boy'];
         
            $scope.arrList = [
                    {
                        id:12,
                        name:'张一',
                        age:20,
                    },
                    {
                        id:23,
                        name:'张二',
                        age:31,
                    },
                    {
                        id:34,
                        name:'李三',
                        age:12,
                    },
                    {
                        id:45,
                        name:'张五',
                        age:33,
                    },
                    {
                        id:56,
                        name:'李六',
                        age:24,
                    }
                ]
            //方法  年龄大于 30  age>30
            $scope.maxAge=function(arr){
                //arrList.age>30
                return arr.age>30;
            }
        }])

 

 附：日期格式

 格式化字符串的基本参数：
       ‘yyyy’: 用4位数字表示年（例如：AD 1 => 0001, AD 2010 => 2010）
       ‘yy’: 用两位数字表示年（00-99）（例如：AD 2001 => 01, AD 2010 => 10）
       ‘y’: 用一位数字代表年（例如：AD 1 => 1, AD 199 => 199）
      ‘MMMM’: 英文全称表示月（January-December）
      ‘MMM’: 英文缩写表示月（Jan-Dec）
      ‘MM’: 两位数字表示月（01-12）
      ‘M’: 月（1-12）
     ‘dd’: 两位数字表示日（01-31）
     ‘d’: 日（1-31）
     ‘EEEE’: 英文全称的一周中的天（Sunday-Saturday）
     ‘EEE’: 英文缩写的一周中的天（Sun-Sat）
     ‘HH’: 两位数表示24小时制的时（00-23）
     ‘H’: 24小时制的时（0-23）
     ‘hh’: 两位数字表示上午或下午的时（01-12）
     ‘h’: 上午或下午的时（1-12）
     ‘mm’: 两位数字表示分（00-59）
     ‘m’: 分（0-59）
     ‘ss’: 两位数字表示秒（00-59）
     ‘s’: 秒（0-59）
     ‘sss’: 毫秒（000-999）
     ‘a’: AM/PM
     ‘Z’: 4位数字（+符号）代表时区偏移量（-1200——+1200）
     ‘ww’: 用两位数字表示一年的周数（00-53），第一周（01）是一年中的第一个星期四
     ‘w’:  一年的周数(0-53)，第一周（1）是一年中的第一个星期四
     ‘G’,’GG’,‘GGG’: 年代字符串的缩写形式，例如‘AD’（公元）
     ‘GGGG’: 年代字符串的全称，例如‘Anno Domini’（公元）