简话Angular 04 Angular过滤器详解

一句话: filter是万能的数据处理器,可以过滤数据,排序数据,删除数据,扩展数据

1. 内置filter大全

url: https://docs.angularjs.org/api/ng/filter

uppercase lowercase	转换为大小写
date	转换为各种日期格式
number	将数字格式化成文本。 它的第二个参数是可选的， 用来控制小数点后截取的位数
currency	转换为货币形式
json	转换json或javascript对象成字符串
filter	过滤数据,可以是字符串,对象,函数
limitTo	生成新的部分字符串或数组,可以正序倒序截取
orderBy	排序,按函数,字符串或数组
编程式使用filter
自定义filter

 

2. 实例

<div ng-controller="ExampleController">
        <span  ng-init="global.fNumber='1234567890'"></span>
        <span  ng-init="global.fString='Hello filter from Michael Qin'"></span>
        <span  ng-init="global.fArray=['Dog', 'gOat', 'cat']"></span>
        <span  ng-init="global.fObjArray=[{name: 'dog', age: 10}, {name: 'Goat', age: 20}, {name: 'cat', age: 30}]"></span>
        
        <script>
        var  myApp = angular.module('myApp', []);
        myApp.controller('ExampleController', function($scope) {
            $scope.global = {};
            $scope.global.fDate = new Date();

            $scope.isCapitalized = function(str) {
                return str[0] == str[0].toUpperCase();
            };

        });
        </script>        
        
        <hr>
        <div>
            <label>uppercase lowercase实例</label><p></p>
            <strong>uppercase:</strong> <span>{{global.fString | uppercase}}</span> {{global.fString}}<br>
            <strong>lowercase:</strong> <span>{{global.fString | lowercase}}</span> <br>
        </div>

        
        <hr>
        <div>
            <label>date实例</label><p></p>
            {{global.fDate | date: 'medium'}} <br>
            {{global.fDate | date: 'short'}} <br>
            {{global.fDate | date: 'fullDate'}} <br>
            {{global.fDate | date: 'longDate'}} <br>
            {{global.fDate | date: 'mediumDate'}} <br>
            {{global.fDate | date: 'shortDate'}} <br>
            {{global.fDate | date: 'mediumTime'}} <br>
            {{global.fDate | date: 'shortTime'}} <br>
            {{global.fDate | date: 'yyyy'}} <br>
            {{global.fDate | date: 'yy'}} <br>
            {{global.fDate | date: 'y'}} <br>
            {{global.fDate | date: 'MMMM'}} <br>
            {{global.fDate | date: 'MMM'}} <br>
            {{global.fDate | date: 'MM'}} <br>
            {{global.fDate | date: 'M'}} <br>
            {{global.fDate | date: 'dd'}} <br>
            {{global.fDate | date: 'd'}} <br>
            {{global.fDate | date: 'EEEE'}} <br>
            {{global.fDate | date: 'hh:mm:ss.sss'}} <br>
            {{global.fDate | date: 'yyyy-MM-dd hh:mm:ss'}} <br>
            {{global.fDate | date: 'yyyy/MM/dd hh:mm:ss'}} <br>
            {{global.fDate | date: 'MM/dd/yyyy hh:mm:ss'}} <br>
        </div>

        <hr>
        <div>
            <label>number实例</label><p></p>
            {{global.fNumber}} <br>
            {{global.fNumber | number}} <br>
            {{global.fNumber | number: 2}} <br>
            {{global.fNumber | number: 5}} <br>
        </div>

        <hr>
        <div>
            <label>currency实例</label><p></p>
            {{global.fNumber | currency}} <br>
            {{global.fNumber | currency: "€"}} <br>
            {{global.fNumber | currency: "£"}} <br>
            {{global.fNumber | currency: "CNY"}} <br>
            {{global.fNumber | currency: "¥"}} <br>
            {{global.fNumber | currency: "元"}} <br>
            {{global.fNumber | currency: "圓"}} <br>
        </div>

        <hr>
        <div>
            <label>json实例</label><p></p>
            {{global.fObjArray | json}} <br>
        </div>

        <hr>
        <div>
            <label>filter实例</label><p></p>
            {{global.fArray | filter: 'o' }} <br>
            {{global.fArray | filter: isCapitalized }} <br>
            {{global.fObjArray | filter:{name: 'dog'} }} <br>
        </div>

        <hr>
        <div>
            <label>limitTo实例</label><p></p>
            {{global.fString | limitTo: 3 }} <br>
            {{global.fArray | limitTo: 2 }} <br>
            {{global.fObjArray | limitTo: -2 }} <br>
        </div>

        <hr>
        <div>
            <label>orderBy实例</label><p></p>
            {{global.fObjArray | orderBy: 'age' }} <br>
            {{global.fObjArray | orderBy: 'age': true }} <br>
            {{global.fObjArray | orderBy: '-age'}} <br>
            {{global.fObjArray | orderBy: 'age': false }} <br>
            {{global.fObjArray | orderBy: '+age'}} <br>
        </div>

        <hr>
        <div>
            <label>编程式使用filter实例</label><p></p>
            <xmp>
$filter('filter')(array, expression, comparator)
$filter('currency')(amount, symbol, fractionSize)
$filter('number')(number, fractionSize)
$filter('date')(date, format, timezone)
$filter('json')(object, spacing)
$filter('lowercase')()
$filter('uppercase')()
$filter('limitTo')(input, limit, begin)
$filter('orderBy')(array, expression, reverse)
            </xmp>
        </div>

        <hr>
        <div>
            <label>自定义filter实例</label><p></p>
            <script>
                myApp.filter('age20', function() {
                    return function(input) {
                        for(var i = 0; i < input.length; i++) {
                            if (input[i].age == 20) {
                                return input[i];
                            }
                        }
                    };
                });
            </script>
            {{global.fObjArray | age20 }} <br>
        </div>

    <hr>
    <hr>
    </div>

 

3. 查看运行结果及基部源码

http://jimuyouyou.github.io/angular-bootstrap-rest-seed/examples/angular/4-filters.html

 

4. github项目地址

https://github.com/jimuyouyou/angular-bootstrap-rest-seed