angular filter封装分页器

最新推荐文章于 2023-11-02 16:46:02 发布
-久了久了就旧了
最新推荐文章于 2023-11-02 16:46:02 发布
阅读量363
点赞数
本文链接：https://blog.csdn.net/xiaozhang0414/article/details/78810238
版权
angular代码专栏收录该内容
15 篇文章 0 订阅
订阅专栏
这里写图片描述
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/angular-route.js"></script>

</head>
<style type="text/css">
    .tab1 tr td {
        border: 1px solid black;
        width: 20px;
    }

    .tab1 td a {
        text-decoration: none;
        color: black;
    }
</style>

<body ng-app="myapp" ng-controller="MyCont">
    <div ng-view></div>
    <table class="tab1" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <center>
                    <a href="#/aa">1</a>
                </center>
            </td>
            <td>
                <center>
                    <a href="#/bb">2</a>
                </center>
            </td>
            <td>
                <center>
                    <a href="#/cc">3</a>
                </center>
            </td>
            <td>
                <center>
                    <a href="#/dd">4</a>
                </center>
            </td>
            <td>
                <center>
                    <a href="#/ee">5</a>
                </center>
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        var xin = [{
            "sname": "鼠标1",
            "gcount": 20,
            "gprice": 5
        }, {
            "sname": "鼠标2",
            "gcount": 21,
            "gprice": 5
        }, {
            "sname": "鼠标3",
            "gcount": 22,
            "gprice": 5
        }, {
            "sname": "鼠标4",
            "gcount": 23,
            "gprice": 5
        }, {
            "sname": "鼠标5",
            "gcount": 24,
            "gprice": 5
        }, {
            "sname": "鼠标6",
            "gcount": 24,
            "gprice": 5
        }, {
            "sname": "鼠标7",
            "gcount": 24,
            "gprice": 5
        }, {
            "sname": "鼠标8",
            "gcount": 24,
            "gprice": 5
        }, {
            "sname": "鼠标9",
            "gcount": 24,
            "gprice": 5
        }, {
            "sname": "鼠标10",
            "gcount": 24,
            "gprice": 5
        }, {
            "sname": "鼠标11",
            "gcount": 24,
            "gprice": 5
        }, {
            "sname": "鼠标12",
            "gcount": 24,
            "gprice": 5
        }, {
            "sname": "鼠标13",
            "gcount": 24,
            "gprice": 5
        }, {
            "sname": "鼠标14",
            "gcount": 24,
            "gprice": 5
        }, {
            "sname": "鼠标15",
            "gcount": 24,
            "gprice": 5
        }];
        var mo = angular.module("myapp", ["ngRoute"]);

        mo.controller("MyCont", function($scope, $filter) {
            $scope.arr = $filter("shuju")(xin, 1)

            $scope.dele=function($index){
                $scope.arr.splice($index,1)
            }




        })

        mo.controller("MyCont1", function($scope, $filter) {
            $scope.arr = $filter("shuju")(xin, 2)
                $scope.dele=function($index){
                $scope.arr.splice($index,1)
            }
        })

        mo.controller("MyCont2", function($scope, $filter) {
            $scope.arr = $filter("shuju")(xin, 3)
                $scope.dele=function($index){
                $scope.arr.splice($index,1)
            }
        })

        mo.controller("MyCont3", function($scope, $filter) {
            $scope.arr = $filter("shuju")(xin, 4)
                $scope.dele=function($index){
                $scope.arr.splice($index,1)
            }
        })

        mo.controller("MyCont4", function($scope, $filter) {
            $scope.arr = $filter("shuju")(xin, 5)
                $scope.dele=function($index){
                $scope.arr.splice($index,1)
            }
        })

        mo.config(function($routeProvider) {
            $routeProvider.when("/aa", {
                templateUrl: "goods.html",
                controller: "MyCont"
            }).when("/bb", {
                templateUrl: "goods.html",
                controller: "MyCont1"
            }).when("/cc", {
                templateUrl: "goods.html",
                controller: "MyCont2"
            }).when("/dd", {
                templateUrl: "goods.html",
                controller: "MyCont3"
            }).when("/ee", {
                templateUrl: "goods.html",
                controller: "MyCont4"
            })

        })

        mo.filter("shuju", function() {
            return function(input, aa) {
                var arr = []
                var arr1 = []
                var arr2 = []
                var arr3 = []
                var arr4 = []
                for(var i = 0; i < input.length; i++) {
                    if(i <= 2) {
                        arr.push(input[i])
                    }
                    if(i > 2 && i <= 5) {
                        arr1.push(input[i])
                    }
                    if(i > 5 && i <= 8) {
                        arr2.push(input[i])
                    }
                    if(i > 8 && i <= 11) {
                        arr3.push(input[i])
                    }
                    if(i > 11 && i <= 14) {
                        arr4.push(input[i])
                    }
                }

                if(aa == 1) {
                    return arr;
                }
                if(aa == 2) {
                    return arr1;
                }
                if(aa == 3) {
                    return arr2
                }
                if(aa == 4) {
                    return arr3
                }
                if(aa == 5) {
                    return arr4
                }
            }
        })



    </script>

</body>