在应用过滤器时，分页不会自动更新。使用Python脚本从数据库加载数据。我是AngularJS的新手。如何更改代码以解决此问题？
我试图通过链接解决问题：Filter through pagination angular未能达成交易:(我的项目：http://www.kasbox.ru
// **Listing index.js**
var app = angular.module('app', [])
.factory('pagination', function ($sce) {
var currentPage = 1;
var itemsPerPage = 50;
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 = [];
paginationList.push({
name: $sce.trustAsHtml('«'),
link: 'prev'
});
if (pcn > (pageMax / 2) + pageFrom) {
pageFrom++;
pageTo = pageMax + pageFrom;
if (pageTo > pagesNum) {
pageTo = pagesNum;
pageFrom = pagesNum - pageMax;
}
}
if (pcn < (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
});
};
}
paginationList.push({
name: $sce.trustAsHtml('»'),
link: 'next'
});
if (pagesNum > 2) {
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, pagination) {
$http.get('http://kasbox.ru/out_data.php?action=getPosts')
.success(function (data) {
$scope.menuObj = data;
pagination.setProducts(data.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();
}
})
///// 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">
<!-- FILTER BOX START -->
<select ng-model="brand" style="margin-top:15px;width:210px;" autocomplete="off">
<option value="{{undefined}}">All</option>
<option ng-repeat="item in menuObj.products | unique: 'brand' | orderBy: 'brand'" id="brand_Select">{{ item.brand }}</option>
</select>
<!-- FILTER BOX END -->
<!-- LISTING PRODUCTS START -->
<div ng-repeat="item in products | filter: brand ">
<div class="thumbnail">
<h5>{{ item.brand }} {{ item.model }}</h5>
<h5>{{ item.full_name }}</h5>
<h5>{{ item.roz_price }}</h5>
</div>
</div>
<!-- LISTING PRODUCTS END -->
<!-- PAGINATION START -->
<ul class="pagination">
<li ng-repeat="page in paginationList" ng-click="showPage(page.link)" ng-class="{'active': currentPageNum() == page.link}"><a ng-bind-html="page.name"></a></li>
</ul>
<!-- PAGINATION END -->
</body>
<!-- some code -->问题解决了！ :)
我对控制器所做的更改（适用于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('»'),
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>