AngularJS中的过滤器（filter）

最新推荐文章于 2024-10-08 14:42:28 发布

weixin_33895016

最新推荐文章于 2024-10-08 14:42:28 发布

阅读量79

点赞数

文章标签： json javascript ViewUI

原文链接：http://blog.51cto.com/iampomelo/1668754

版权

AngularJS中的过滤器是用于对数据的格式化，或者筛选的函数，可以直接通过以下语法使用：

{{expression|filter1:param1,param2,...|filter2}

过滤器的种类有number，currency，date，json，limitTo，lowercase，uppercase，filter，orderBy。

<!DOCTYPE html>
<html ng-app="app">

<head>
    <meta charset="utf-8">
</head>

<body ng-app="app">
    <div ng-controller="Controller1">
        <p>{{1234567890 | number}}</p>
        <!--显示1,234,567,890-->
        <p>{{1234.56789 | number:3}}</p>
        <!--显示1,234.568，保留3位小数-->
        <p>{{1234.56789 | currency}}</p>
        <!--显示$1,234.57，货币，默认的前缀是美元符号-->
        <p>{{1234.56789 | currency:'￥'}}</p>
        <!--显示￥1,234.57-->
        <p>{{today | date:'medium'}}</p>
        <!--显示Jun 28, 2015 3:45:54 PM-->
        <p>{{today | date:'short'}}</p>
        <!--显示6/28/15 3:45 PM-->
        <p>{{today | date:'fullDate'}}</p>
        <!--显示Sunday, June 28, 2015-->
        <p>{{today | date:'longDate'}}</p>
        <!--显示June 28, 2015-->
        <p>{{today | date:'shortDate'}}</p>
        <!--显示6/28/15-->
        <p>{{today | date:'shortTime'}}</p>
        <!--显示3:45 PM-->
        <p>{{today | date:'mediumTime'}}</p>
        <!--显示3:45:54 PM-->
        <p>{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>
        <!--显示2015-06-28 15:45:54-->
        <p>{{['a','b','c','d','e'] | limitTo:3}}</p>
        <!--显示["a","b","c"]，截取前3位-->
        <p>{{['a','b','c','d','e'] | limitTo:-3}}</p>
        <!--显示["c","d","e"]，截取后3位-->
        <p>{{'Hello World' | lowercase}}</p>
        <!--显示hello world-->
        <p>{{'Hello World' | uppercase}}</p>
        <!--显示HELLO WORLD-->
        <p>{{data.phone | filter:'le'}}</p>
        <!--显示[{"name":"iPhone","company":"Apple"}]，只匹配value值-->
        <p>{{data.phone | filter:{company:'A'} }}</p>
        <!--显示[{"name":"iPhone","company":"Apple"},{"name":"HUAWEI P8","company":"HUAWEI"}]，company中有A就会匹配到-->
        <p>{{data.phone | orderBy:'name'}}</p>
        <!--显示[{"name":"Galaxy S5","company":"Sumsung"},{"name":"HUAWEI P8","company":"HUAWEI"},{"name":"iPhone","company":"Apple"}]，以name的值做排序，默认是从小到大排序-->
        <p>{{data.phone | orderBy:-'name'}}</p>
        <!--显示[{"name":"iPhone","company":"Apple"},{"name":"Galaxy S5","company":"Sumsung"},{"name":"HUAWEI P8","company":"HUAWEI"}]，反序-->
        <p>{{[2,24,13,89,3,8,41,9,10] | filter:checkNum}}</p>
        <!--自定义的过滤器，显示[2,3,8,9,10]，定义见90~95行-->
    </div>
    <script src="../JS/angular.min.js"></script>
    <script type="text/javascript">
    angular.module('app', [])
        .controller('Controller1', function($scope, $filter) {
            $scope.today = new Date;
            $scope.data = {
                phone: [{
                    name: 'iPhone',
                    company: 'Apple'
                }, {
                    name: 'Galaxy S5',
                    company: 'Sumsung'
                }, {
                    name: 'HUAWEI P8',
                    company: 'HUAWEI'
                }]
            };
            var jsonString = $filter('json')($scope.data);
            console.log(jsonString);
            /* console输出json格式的data
            {
                "phone": [
                  {
                    "name": "iPhone",
                    "company": "Apple"
                  },
                  {
                    "name": "Galaxy S5",
                    "company": "Sumsung"
                  },
                  {
                    "name": "HUAWEI P8",
                    "company": "HUAWEI"
                  }
                ]
            }
            */
            //自定义过滤器
            $scope.checkNum = function(num) {
                //>10的不保留
                if (num > 10) return false;
                else return true;
            }
        });
    </script>
</body>

</html>

除了上面自定义过滤器的方法外，还有两种专门的方法。

第一种 module.filter(name,filterFactory)

第二种 @$filterProvider.register();

第一种的例子

<!DOCTYPE html>
<html ng-app="app">

<head>
    <meta charset="utf-8">
</head>

<body ng-app="app">
    <div ng-controller="Controller1">
        <ul>
            <!-- 循环输出data里面的数据，用自定义的名为filterAge的过滤器过滤 -->
            <li ng-repeat="item in data | filterAge">
                `item`.`name` `item`.`age` `item`.`position`
            </li>
        </ul>
    </div>
    <script src="../JS/angular.min.js"></script>
    <script type="text/javascript">
    angular.module('app', [], function($provide) {
            //service提供数据
            $provide.service('data', function() {
                return [{
                    name: 'Wilshere',
                    age: 23,
                    position: 'midfield'
                }, {
                    name: 'Giroud',
                    age: 28,
                    position: 'striker'
                }, {
                    name: 'Cech',
                    age: 33,
                    position: 'goalkeeper'
                }];
            });
        })
        //用.filter的方法定义过滤器
        .filter('filterAge', function() {
            return function(obj) {
                //obj是过滤前的对象
                var newObj = [];
                angular.forEach(obj, function(i) {
                    if (i.age > 25) {
                        newObj.push(i);
                    }
                });
                return newObj;
            }
        })
        .controller('Controller1', function($scope, data) {
            $scope.data = data;
        });
    </script>
</body>

</html>

第二种的例子

<!DOCTYPE html>
<html ng-app="app">

<head>
    <meta charset="utf-8">
</head>

<body ng-app="app">
    <div ng-controller="Controller1">
        <ul>
            <!-- 循环输出data里面的数据，用自定义的名为filterAge的过滤器过滤 -->
            <li ng-repeat="item in data | filterAge">
                `item`.`name` `item`.`age` `item`.`position`
            </li>
        </ul>
    </div>
    <script src="../JS/angular.min.js"></script>
    <script type="text/javascript">
    angular.module('app', [], function($filterProvider, $provide) {
            //用注册的方法自定义过滤器
            $filterProvider.register('filterAge', function() {
                return function(obj) {
                    var newObj = [];
                    angular.forEach(obj, function(i) {
                        //age大于25的才会输出
                        if (i.age > 25) {
                            newObj.push(i);
                        }
                    });
                    return newObj;
                }
            });
            //service提供数据
            $provide.service('data', function() {
                return [{
                    name: 'Wilshere',
                    age: 23,
                    position: 'midfield'
                }, {
                    name: 'Giroud',
                    age: 28,
                    position: 'striker'
                }, {
                    name: 'Cech',
                    age: 33,
                    position: 'goalkeeper'
                }];
            });
        })
        .controller('Controller1', function($scope, data) {
            $scope.data = data;
        });
    </script>
</body>

</html>