angularjs - 过滤后如何更改分页，而不是在页面上寻找结果？

Question

应用过滤器时，分页不会自行更新。使用 Python 脚本从数据库加载数据。我是 AngularJS 的新手。如何更改代码以解决此问题？

我试图通过链接解决问题：通过分页角度过滤 无法处理:(

更正代码↓</p>

<!-- language: lang-json -->

// **Listing index.json** 
[{
"name": "265/70R16 112T Ice Zero",
"width": "265",
"height": "70",
"razmer": "R16",
"price": 112,
"model":"Ice Zero",
"brand":"Pirelli"
},
{
"name": "225/55R17 112T Ice Maiz",
"width": "225",
"height": "55",
"razmer": "R17",
"price": 102,
"model":"Ice Maiz",
"brand":"Continental"
},
{
"name": "205/50R16 112T PSX",
"width": "205",
"height": "50",
"razmer": "R16",
"price": 92,
"model":"PSX",
"brand":"Bridgstoun"
},
{
"name": "205/55R17 112T Brrr",
"width": "205",
"height": "55",
"razmer": "R17",
"price": 100,
"model":"Brrr",
"brand":"Toyo"
},
{
"name": "225/55R17 112T ICE WinterSport",
"width": "225",
"height": "55",
"razmer": "R17",
"price": 102,
"model":"ICE WinterSport",
"brand":"Dunlop"
},
{
"name": "255/65R18 112T Winter",
"width": "255",
"height": "65",
"razmer": "R18",
"price": 122,
"model":"Winter",
"brand":"Nokian"
},
{
"name": "225/55R17 112T Hmit 5",
"width": "225",
"height": "55",
"razmer": "R17",
"price": 102,
"model":"Hmit 5",
"brand":"Kunho"
},
{
"name": "245/45R20 112T Ice Sport",
"width": "245",
"height": "45",
"razmer": "R20",
"price": 202,
"model":"Ice Sport",
"brand":"GoodYear"
}]

// **Listing index.js** 
   
var app = angular.module('app', [])
    .factory('pagination', function ($sce) {
        var currentPage = 1;
        var itemsPerPage = 3;
        var pageMax = 12;
        var pageTo = 0;
        var pageFrom = 0;
        var products = [];
        var click_count_next = 0;

        return {

            setProducts: function (newProducts) {
                products = newProducts
            }, /* END of setProducts */

            getPageProducts: function (num) {
                var num = angular.isUndefined(num) ? 0 : num;
                var first = itemsPerPage * num;
                var last = first + itemsPerPage;
                currentPage = num;
                last = last > products.length ? (products.length) : last;
                return products.slice(first, last);
            }, /* END of getPageProducts */

            getTotalPagesNum: function () {
                return Math.ceil(products.length / itemsPerPage);
            }, /* END of getTotalPagesNum */

            getPaginationList: function (pcn) {
                var pcn = angular.isUndefined(pcn) ? 0 : pcn;
                var pagesNum = this.getTotalPagesNum();
                var paginationList = [];
                /*document.write(pagesNum);*/
                paginationList.push({
                    name: $sce.trustAsHtml('«'),
                    link: 'prev'
                });
                if (pageMax < pagesNum) {
                    if (pcn > Math.ceil(pageMax / 2) + pageFrom) {
                        pageFrom++;
                        pageTo = pageMax + pageFrom;
                        if (pageTo > pagesNum) {
                            pageTo = pagesNum;
                            pageFrom = pagesNum - pageMax;
                        }
                    }
                    if (pcn < Math.ceil(pageMax / 2) + pageFrom) {
                        pageTo--;
                        pageFrom = pageTo - pageMax;
                        if (pageFrom < 0) {
                            pageFrom = 0;
                            pageTo = pageMax;
                        }
                    }
                    if (pageTo <= pagesNum) {
                        for (var i = pageFrom; i < pageTo; i++) {
                            var name = i + 1;
                            paginationList.push({
                                name: $sce.trustAsHtml(String(name)),
                                link: i
                            });
                        };
                    }
                }
                else {
                    for (var i = 0; i < pagesNum; i++) {
                        var name = i + 1;
                        paginationList.push({
                            name: $sce.trustAsHtml(String(name)),
                            link: i
                        });
                    };
                }
                paginationList.push({
                    name: $sce.trustAsHtml('&raquo;'),
                    link: 'next'
                });
                if (pagesNum > 1) {
                    return paginationList;
                } else {
                    return null;
                }
            }, /* END of getPaginationList */

            getUpdatePagination: function () {
                return this.getPaginationList(click_count_next)
            },

            getPrevPageProducts: function () {
                var prevPageNum = currentPage - 1;
                if (prevPageNum < 0) prevPageNum = 0;
                this.getPageProducts(prevPageNum);
                return currentPage;
            }, /* END of getPrevPageProducts */

            getNextPageProducts: function () {
                var nextPageNum = currentPage + 1;
                var pagesNum = this.getTotalPagesNum();
                if (nextPageNum >= pagesNum) nextPageNum = pagesNum - 1;
                this.getPageProducts(nextPageNum);
                return currentPage;
            }, /* END of getNextPageProducts */

            getCurrentPageNum: function () {
                return currentPage;
            }, /* END of getCurrentPageNum */
        }
    }) /* END of factory-pagination */

    ///// CONTROLLER START
    .controller('mainCtrl', function ($scope, $http, $filter, pagination) {
        $http.get('https://mesnalex.com/stackoverflow/index.json')
            .success(function(data){
                $scope.products = $scope.ProductObj = data;
                $scope.filterProducts = function () {
                    var chain = new filterChain($scope.ProductObj);
                    $scope.products = chain
                        .applyFilter('filter', [{ brand: $scope.brand }])
                        .applyFilter('filter', [{ razmer: $scope.razmer }])
                        .applyFilter('filter', [{ width: $scope.width }])
                        .applyFilter('filter', [{ height: $scope.height }])
                        .value;
                    pagination.setProducts($scope.products);
                    $scope.products = pagination.getPageProducts($scope.currentPage);
                    $scope.paginationList = pagination.getPaginationList($scope.page_click_next);
                };
                pagination.setProducts($scope.products);
                $scope.products = pagination.getPageProducts($scope.currentPage);
                $scope.paginationList = pagination.getPaginationList($scope.page_click_next);
                $scope.showPage = function (page) {
                    if (page == 'prev') {
                        $scope.products = pagination.getPageProducts(page = pagination.getPrevPageProducts());
                        $scope.paginationList = pagination.getPaginationList(page);
                    }
                    else if (page == 'next') {
                        $scope.products = pagination.getPageProducts(page = pagination.getNextPageProducts());
                        $scope.paginationList = pagination.getPaginationList(page);
                    } else {
                        $scope.products = pagination.getPageProducts(page);
                        $scope.paginationList = pagination.getPaginationList(page);
                    }
                }
                $scope.currentPageNum = function () {
                    return pagination.getCurrentPageNum();
                }
                function filterChain(value) {
                    this.value = value;
                }
                filterChain.prototype.applyFilter = function (filterName, args) {
                    args.unshift(this.value);
                    this.value = $filter(filterName).apply(undefined, args)
                    return this;
                };
            });
        });
    ///// CONTROLLER END

    app.filter('unique', function () {
     return function (items, filterOn) {

                if (filterOn === false) {
                    return items;
                }

                if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
                    var hashCheck = {}, newItems = [];

                    var extractValueToCompare = function (item) {
                        if (angular.isObject(item) && angular.isString(filterOn)) {
                            return item[filterOn];
                        } else {
                            return item;
                        }
                    };

                    angular.forEach(items, function (item) {
                        var valueToCheck, isDuplicate = false;

                        for (var i = 0; i < newItems.length; i++) {
                            if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
                                isDuplicate = true;
                                break;
                            }
                        }
                        if (!isDuplicate) {
                            newItems.push(item);
                        }

                    });
                    items = newItems;
                }
                return items;
            };
    });

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.23/angular.min.js"></script>
<!-- **Listing index.html** -->
<!-- some code -->
<body ng-app="app" ng-controller="mainCtrl">
<!--<div class="my_blog"><h2>My Blog</h2>   -->    
        <!-- FILTER BOX START -->
        <select ng-model="brand" ng-change="filterProducts()" style="margin-top:35px;width:210px;" autocomplete="off">
            <option style="color:gray;" value="{{undefined}}">All</option>
            <option ng-repeat="item in ProductObj | unique: 'brand' | orderBy: 'brand'" id="brand_Select" >{{ item.brand }}</option>
       </select>
       <select ng-model="height" ng-change="filterProducts()" style="float:left;margin-top:35px;width:210px;" autocomplete="off">
        <option style="color:gray;" value="{{undefined}}">All</option>
        <option ng-repeat="item in ProductObj | unique: 'height' | orderBy: 'height'" id="height_Select" >{{ item.height }}</option>
   </select>
        <!-- FILTER BOX END -->
        <!-- LISTING PRODUCTS START -->
        <div ng-repeat="item in products">
            <div>
                <h5>{{ item.brand }} {{ item.model }}</h5>
                <h5>{{ item.name }}</h5>
                <h5>{{ item.price }}</h5>
            </div>
        </div>
        <!-- LISTING PRODUCTS END -->
        <!-- PAGINATION START -->
        <ul class="pagination">
            <li class="page-item" ng-repeat="page in paginationList" ng-click="showPage(page.link)" ng-class="{'active': currentPageNum() == page.link}"><a class="page-link" ng-bind-html="page.name"></a></li>
        </ul>
        <!-- PAGINATION END -->
</body>
<!-- some code -->

标签： angularjsfilterpaginationangularjs-ng-repeat

Answer 1

问题解决了！:)

我对控制器所做的更改（用于 4 个过滤器）：

    .controller('mainCtrl', function ($scope, $http, $filter, pagination) {
                $http.get('./out_data.php?action=getPosts')
                    .success(function(data){
                        $scope.products = $scope.ProductObj = data;
                        $scope.filterProducts = function () {
                            var chain = new filterChain($scope.ProductObj);
                            $scope.products = chain
                                .applyFilter('filter', [{ brand: $scope.brand }])
                                .applyFilter('filter', [{ razmer: $scope.razmer }])
                                .applyFilter('filter', [{ width: $scope.width }])
                                .applyFilter('filter', [{ height: $scope.height }])
                                .value;
                            pagination.setProducts($scope.products);
                            $scope.products = pagination.getPageProducts($scope.currentPage);
                            $scope.paginationList = pagination.getPaginationList($scope.page_click_next);
                        };
                        pagination.setProducts($scope.products);
                        $scope.products = pagination.getPageProducts($scope.currentPage);
                        $scope.paginationList = pagination.getPaginationList($scope.page_click_next);

                        function filterChain(value) {
                            this.value = value;
                        }
                        filterChain.prototype.applyFilter = function (filterName, args) {
                            args.unshift(this.value);
                            this.value = $filter(filterName).apply(undefined, args)
                            return this;
                        };
                    });

我对 getPaginationList 函数所做的更改：

getPaginationList: function (pcn) {
                        var pcn = angular.isUndefined(pcn) ? 0 : pcn;
                        var pagesNum = this.getTotalPagesNum();
                        var paginationList = [];
                        /*document.write(pagesNum);*/
                        paginationList.push({
                            name: $sce.trustAsHtml('«'),
                            link: 'prev'
                        });
                        if (pageMax < pagesNum) {
                            if (pcn > Math.ceil(pageMax / 2) + pageFrom) {
                                pageFrom++;
                                pageTo = pageMax + pageFrom;
                                if (pageTo > pagesNum) {
                                    pageTo = pagesNum;
                                    pageFrom = pagesNum - pageMax;
                                }
                            }
                            if (pcn < Math.ceil(pageMax / 2) + pageFrom) {
                                pageTo--;
                                pageFrom = pageTo - pageMax;
                                if (pageFrom < 0) {
                                    pageFrom = 0;
                                    pageTo = pageMax;
                                }
                            }
                            if (pageTo <= pagesNum) {
                                for (var i = pageFrom; i < pageTo; i++) {
                                    var name = i + 1;
                                    paginationList.push({
                                        name: $sce.trustAsHtml(String(name)),
                                        link: i
                                    });
                                };
                            }
                        }
                        else {
                            for (var i = 0; i < pagesNum; i++) {
                                var name = i + 1;
                                paginationList.push({
                                    name: $sce.trustAsHtml(String(name)),
                                    link: i
                                });
                            };
                        }
                        paginationList.push({
                            name: $sce.trustAsHtml('&raquo;'),
                            link: 'next'
                        });
                        if (pagesNum > 1) {
                            return paginationList;
                        } else {
                            return null;
                        }
                    }, /* END of getPaginationList */

对 index.html 的更正：

<select ng-model="brand" ng-change="filterProducts()" style="margin-top:15px;width:210px;" autocomplete="off">
     <option style="color:gray;" value="{{undefined}}">All</option>
     <option ng-repeat="item in ProductObj | unique: 'brand' | orderBy: 'brand'" id="brand_Select" >{{ item.brand }}</option>
</select>

……

 <div ng-repeat="item in products">
    <div class="thumbnail">
        <h5>{{ item.brand }} {{ item.model }}</h5>
        <h5>{{ item.full_name }}</h5>
        <h5>{{ item.roz_price }}</h5>
    </div>
</div>