angularjs-自定义过滤器示例

最新推荐文章于 2024-04-26 16:52:50 发布

Mars-xq

最新推荐文章于 2024-04-26 16:52:50 发布

阅读量1.1w

点赞数

分类专栏： angularjs angularjs

本文链接：https://blog.csdn.net/sinat_31057219/article/details/60869966

版权

angularjs 同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

angularjs

37 篇文章 0 订阅

订阅专栏

过滤器结构

{{带过滤数据 | 过滤器名：参数1：参数2：参数3.....}}


app.filter('过滤器名', function () {
        return function (待过滤数据, 参数....) {
                      ......
            return  已过滤数据;
 }

示例一：是否包含

<!doctype html>
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>

<div ng-controller="myAppCtrl">
    <div>
        <table>
            <tr>
                <th>Name</th>
                <th>Phone</th>
            </tr>
            <!--写法1-->
            <tr ng-repeat="friend in friends |myfilter">
            <!--写法2-->
<!--<tr ng-repeat="friend  in newArr=(friends | myfilter)">-->
                <td>{{friend.name}}</td>
                <td>{{friend.phone}}</td>
            </tr>
        </table>
    </div>
</div>
<script type="text/javascript">

    var app = angular.module("myApp", []);

    app.controller("myAppCtrl", ["$scope", function ($scope) {
        $scope.friends = [{name: 'John', phone: '44555-1276'},
            {name: 'Annie', phone: '800-BIG-MARY'},
            {name: 'Mike', phone: '11555-4321'},
            {name: 'Adam', phone: '33555-5678'},
            {name: 'David', phone: '387555-8765'},
            {name: 'Mikay', phone: '555-5678'}];
    }]);

    app.filter("myfilter", function () {
        return function (input) {
            var output = [];
            angular.forEach(input, function (value, key) {
                console.log("value==" + JSON.stringify(value));
                console.log("value.phone类型==" + typeof (value.phone));
                console.log("value.phone.indexOf==" + value.phone.indexOf("555"));
                /*js中没有contains方法，使用indexOf来判断字符串是否包含*/
                /*indexOf字符串出现的位置，没有则返回-1*/
                //方法一：
                if (value.phone.indexOf("555") >= 0) {
                    output.push(value);
                }
                //方法二：
//                if (value.phone.indexOf("555") !== -1) {
//                    output.push(value);
//                }
            });
            return output;
        }
    });
</script>
</body>
</html>

示例二：倒序

<!doctype html>
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>

<div ng-controller="myAppCtrl">
    姓名:{{ name }}<br>
    倒序:{{ name | reverse }}<br>
    倒序并大写:{{ name | reverse:true }}
</div>
<script type="text/javascript">
    var myAppModule = angular.module("myApp", []);

    myAppModule.controller("myAppCtrl", ["$scope", function ($scope) {
        $scope.name = "xuqiang";
    }]);

    myAppModule.filter("reverse", function () {
        return function (input, uppercase) {
            <!--input就是其中name代表的值。-->
            <!--uppercase这个bool值，判断是否要进行大小写转换。-->
            var out = "";
            for (var i = 0; i < input.length; i++) {
                out = input.charAt(i) + out;
            }
            if (uppercase) {
                out = out.toUpperCase();
            }
            return out;
            <!--返回过滤后的字符串-->
        }
    });
</script>
</body>
</html>

示例三：替换

<!doctype html>
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>

<body ng-controller="myAppCtrl">

<div>
    <div>
        {{welcome | replaceHello}}<br/>
        {{welcome | replaceHello:3:5}}<br/>
    </div>
</div>

<script type="text/javascript">
    var app = angular.module("myApp", []);

    app.controller("myAppCtrl", ["$scope", function ($scope) {
        $scope.welcome = "Hello AngularJs";
    }]);

    //自定义过滤器
    app.filter('replaceHello', function () {
        return function (input, n1, n2) {
            console.log("input==" + input);
            console.log("n1==" + n1);
            console.log("n2==" + n2);
            return input.replace(/Hello/, '您好');
        }
    });
</script>
</body>
</html>

示例四：筛选

<!doctype html>
<html ng-app="a3_3">
<head>
    <title>自定义过滤器</title>
    <script src="../Script/angular.min.js"
            type="text/javascript"></script>
    <style type="text/css">
        body {
            font-size: 12px;
        }

        ul {
            list-style-type: none;
            width: 408px;
            margin: 0px;
            padding: 0px;
        }

        ul li {
            float: left;
            padding: 5px 0px;
        }

        ul .odd {
            color: #0026ff;
        }

        ul .even {
            color: #ff0000;
        }

        ul .bold {
            font-weight: bold;
        }

        ul li span {
            width: 52px;
            float: left;
            padding: 0px 10px;
        }

        ul .focus {
            background-color: #cccccc;
        }
    </style>
</head>
<body>
<div ng-controller="c3_3">
    <ul>
        <li ng-class="{{bold}}">
            <span>序号</span>
            <span>姓名</span>
            <span>性别</span>
            <span>年龄</span>
            <span>分数</span>
        </li>
        <li ng-repeat=" stu in data | young:0"
            ng-class-odd="'odd'"
            ng-class-even="'even'">
            <span>{{$index+1}}</span>
            <span>{{stu.name}}</span>
            <span>{{stu.sex}}</span>
            <span>{{stu.age}}</span>
            <span>{{stu.score}}</span>
        </li>
    </ul>
</div>
<script type="text/javascript">
    var a3_3 = angular.module('a3_3', []);
    a3_3.controller('c3_3', ['$scope', function ($scope) {
        $scope.bold = "bold";
        $scope.data = [
            {name: "张明明", sex: "女", age: 24, score: 95},
            {name: "李清思", sex: "女", age: 27, score: 87},
            {name: "刘小华", sex: "男", age: 28, score: 86},
            {name: "陈忠忠", sex: "男", age: 23, score: 97}
        ];
    }]);
    a3_3.filter('young', function () {
        return function (e, type) {
            var _out = [];
            var _sex = type ? "男" : "女";
            for (var i = 0; i < e.length; i++) {
                if (e[i].age > 22 && e[i].age < 28 &&
                    e[i].sex == _sex)
                    _out.push(e[i]);
            }
            return _out;
        }
    });
</script>
</body>
</html>

示例五：排序

<!doctype html>
<html ng-app="a3_4">
<head>
    <title>表头排序</title>
    <script src="../Script/angular.min.js"
            type="text/javascript"></script>
    <style type="text/css">
        body {
            font-size: 12px;
        }

        ul {
            list-style-type: none;
            width: 408px;
            margin: 0px;
            padding: 0px;
        }

        ul li {
            float: left;
            padding: 5px 0px;
        }

        ul .bold {
            font-weight: bold;
            cursor: pointer;
        }

        ul li span {
            width: 52px;
            float: left;
            padding: 0px 10px;
        }

        ul .focus {
            background-color: #cccccc;
        }
    </style>
</head>
<body>
<div ng-controller="c3_4">
    <ul>
        <li ng-class="{{bold}}">
            <span>序号</span>
            <span ng-click="title='name';desc=!desc">
                    姓名
                </span>
            <span ng-click="title='sex';desc=!desc">
                    性别
                </span>
            <span ng-click="title='age';desc=!desc">
                    年龄
                </span>
            <span ng-click="title='score';desc=!desc">
                    分数
                </span>
        </li>
        <li ng-repeat=" stu in data | orderBy : title : desc">
        <!--title：属性值，desc：升序or降序-->
            <span>{{$index+1}}</span>
            <span>{{stu.name}}</span>
            <span>{{stu.sex}}</span>
            <span>{{stu.age}}</span>
            <span>{{stu.score}}</span>
        </li>
    </ul>
</div>
<script type="text/javascript">
    var a3_4 = angular.module('a3_4', []);
    a3_4.controller('c3_4', ['$scope', function ($scope) {
        $scope.bold = "bold";
        $scope.title = 'name';
        $scope.desc = 0;
        $scope.data = [
            {name: "张明明", sex: "女", age: 24, score: 95},
            {name: "李清思", sex: "女", age: 27, score: 87},
            {name: "刘小华", sex: "男", age: 28, score: 86},
            {name: "陈忠忠", sex: "男", age: 23, score: 97}
        ];
    }])
</script>
</body>
</html>

示例六：输入过滤

<!doctype html>
<html ng-app="a3_5">
<head>
    <title>字符查找</title>
    <script src="../Script/angular.min.js"
            type="text/javascript"></script>
    <style type="text/css">
        body {
            font-size: 12px;
        }

        ul {
            list-style-type: none;
            width: 408px;
            margin: 0px;
            padding: 0px;
        }

        ul li {
            float: left;
            padding: 5px 0px;
        }

        ul .bold {
            font-weight: bold;
            cursor: pointer;
        }

        ul li span {
            width: 52px;
            float: left;
            padding: 0px 10px;
        }

        ul .focus {
            background-color: #cccccc;
        }
    </style>
</head>
<body>
<div ng-controller="c3_5">
    <div>
        <input id="txtkey" type="text"
               ng-model="key" placeholder="请输入姓名关键字"/>
    </div>
    <ul>
        <li ng-class="{{bold}}">
            <span>序号</span>
            <span>姓名</span>
            <span>性别</span>
            <span>年龄</span>
            <span>分数</span>
        </li>
        <li ng-repeat=" stu in data | filter : {name:key}">
            <span>{{$index+1}}</span>
            <span>{{stu.name}}</span>
            <span>{{stu.sex}}</span>
            <span>{{stu.age}}</span>
            <span>{{stu.score}}</span>
        </li>
    </ul>
</div>
<script type="text/javascript">
    var a3_5 = angular.module('a3_5', []);
    a3_5.controller('c3_5', ['$scope', function ($scope) {
        $scope.bold = "bold";
        $scope.key = '';
        $scope.data = [
            {name: "张明明", sex: "女", age: 24, score: 95},
            {name: "李清思", sex: "女", age: 27, score: 87},
            {name: "刘小华", sex: "男", age: 28, score: 86},
            {name: "陈忠忠", sex: "男", age: 23, score: 97}
        ];
    }])
</script>
</body>
</html>

参考：

【angularjs实战】

Mars-xq

关注

0
点赞
踩
7

收藏

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

示例一：<!doctype html><html ng-app="myApp"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"><
复制链接

扫一扫