自定义过滤器

最新推荐文章于 2024-07-03 07:45:00 发布

郝静and静静

最新推荐文章于 2024-07-03 07:45:00 发布

阅读量200

点赞数

分类专栏：前端开发

前端开发专栏收录该内容

57 篇文章 0 订阅

订阅专栏

<html>
<head>
    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script type="text/javascript">
        function windowScopedFilter (input) {
            var output = [];
            angular.forEach(input, function(v,k){
                if (v.phone.indexOf("555")>0) {
                    output.push(v);
                }
            });
            return output;
        }
        var myapp = angular.module('MyFilterApp', []);
        myapp.filter('myfilter', function() {
            return function(input, param1) {
                console.log("------------------------------------------------- begin dump of custom parameters");
                console.log("input=",input);
                console.log("param1(string)=", param1);
                var args = Array.prototype.slice.call(arguments);
                console.log("arguments=", args.length);
                if (3<=args.length) {
                    console.log("param2(string)=", args[2]);
                }
                if (4<=args.length) {
                    console.log("param3(bool)=", args[3]);
                }
                console.log("------------------------------------------------- end dump of custom parameters");
                // filter
                if (5<=args.length) {
                    return window[args[4]](input);
                }
                return input;
            };
        });
        myapp.controller('MyFilterController', ['$scope', function($scope) {
            $scope.friends = [{name:'John', phone:'555-1276'},
                {name:'Annie', phone:'800-BIG-MARY'},
                {name:'Mike', phone:'555-4321'},
                {name:'Adam', phone:'555-5678'},
                {name:'David', phone:'555-8765'},
                {name:'Mikay', phone:'555-5678'}];
        }]);
    </script>
</head>
<body ng-app="MyFilterApp">
<div ng-controller="MyFilterController">
    <table id="searchTextResults">
        <tr><th>Name</th><th>Phone</th></tr>
        <tr ng-repeat="friend in friends |myfilter:'param1':'param2':true:'windowScopedFilter'">
            <td>{{friend.name}}</td>
            <td>{{friend.phone}}</td>
        </tr>
    </table>
</div>
<hr>
</body>
</html>

//解释下自定义指令中的参数------将上述代码在浏览器打开的时候，同时打开控制台，看下控制台的输出内容。

 myapp.filter('myfilter', function() {
            return function(input, param1) {
                console.log("------------------------------------------------- begin dump of custom parameters");
                console.log("input=",input);
                console.log("param1(string)=", param1);
                var args = Array.prototype.slice.call(arguments);
                console.log("arguments=", args.length);
                if (3<=args.length) {
                    console.log("param2(string)=", args[2]);
                }
                if (4<=args.length) {
                    console.log("param3(bool)=", args[3]);
                }
                console.log("------------------------------------------------- end dump of custom parameters");
                // filter
                if (5<=args.length) {
                    return window[args[4]](input);
                }
                return input;
            };
        });

自定义指令myFiler的函数

return function(input, param1)

中的参数input就是在html页面中过滤器myFilter前面管道符前面的数组对象 friends,注意是friends而不是friend。而后面的参数和html页面中myFilter冒号后面的参数，可以有0个1个或多个参数，根据实际情况而定。

<tr ng-repeat="friend in friends |myfilter:'param1':'param2':true:'windowScopedFilter'">

郝静and静静

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义过滤器

html>head> script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js">script> script src="js/angular.min.js">script> script type="text/javascript"> fun
复制链接

扫一扫

专栏目录