Javascript 如何在Angular JS中应用多个分页过滤器？
我尝试在Javascript 如何在Angular JS中应用多个分页过滤器？,javascript,angularjs,pagination,angular-filters,Javascript,Angularjs,Pagination,Angular Filters,我尝试在Angular JS中应用多个带分页的过滤器我可以用一个过滤器对结果进行分页，但当有多个过滤器时，我无法执行或在两个过滤器之间执行，而不是和请帮助我实现这一点。我们将非常感谢您的帮助。这是我的密码。 这是我的index.html <html xmlns:ng="http://angularjs.org" ng-app lang="en"> <head> <meta charset="utf-8">
Angular JS中应用多个带分页的过滤器或在两个过滤器之间执行，而不是和
请帮助我实现这一点。我们将非常感谢您的帮助。这是我的密码。
这是我的index.html
<html xmlns:ng="http://angularjs.org" ng-app lang="en">
<head>
<meta charset="utf-8">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
</head>
<body>
</div>
<div ng-controller="ctrlRead">
<div class="input-append">
<input type="text" ng-model="name" ng-change="nameSearch()" class="input-large search-query" placeholder="Search Name">
<input type="text" ng-model="country" ng-change="countrySearch()" class="input-large search-query" placeholder="Search Name">
<span class="add-on"><i class="icon-search"></i></span>
</div>
<div class="pagination pull-right">
<ul>
<li ng-class="{disabled: currentPage == 0}">
<a href ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range(pagedItems.length)"
ng-class="{active: n == currentPage}"
ng-click="setPage()">
<a href ng-bind="n + 1">1</a>
</li>
<li ng-class="{disabled: currentPage == pagedItems.length - 1}">
<a href ng-click="nextPage()">Next »</a>
</li>
</ul>
</div>
</div>
</body>
</html>
-
-
-
这是我的剧本
function ctrlRead($scope, $filter) {
// init
$scope.sortingOrder = sortingOrder;
$scope.reverse = false;
$scope.filteredItems = [];
$scope.groupedItems = [];
$scope.itemsPerPage = 5;
$scope.pagedItems = [];
$scope.currentPage = 0;
$scope.items = [
{"id":"1","name":"John","country":"usa"},
{"id":"2","name":"Peter",,"country":"London"}];
// init the filtered items
$scope.nameSearch = function () {
$scope.filteredItems = $filter('filter')($scope.items, function (item) {
if(item.name.includes($scope.name)){
return true;
}
});
$scope.countrySearch = function () {
$scope.filteredItems = $filter('filter')($scope.items, function (item) {
if(item.country.includes($scope.country)){
return true;
}
});
$scope.currentPage = 0;
// now group by pages
$scope.groupToPages();
};
// calculate page in place
$scope.groupToPages = function () {
$scope.pagedItems = [];
for (var i = 0; i < $scope.filteredItems.length; i++) {
if (i % $scope.itemsPerPage === 0) {
$scope.pagedItems[Math.floor(i / $scope.itemsPerPage)] = [ $scope.filteredItems[i] ];
} else {
$scope.pagedItems[Math.floor(i / $scope.itemsPerPage)].push($scope.filteredItems[i]);
}
}
};
$scope.range = function (start, end) {
var ret = [];
if (!end) {
end = start;
start = 0;
}
for (var i = start; i < end; i++) {
ret.push(i);
}
return ret;
};
$scope.prevPage = function () {
if ($scope.currentPage > 0) {
$scope.currentPage--;
}
};
$scope.nextPage = function () {
if ($scope.currentPage < $scope.pagedItems.length - 1) {
$scope.currentPage++;
}
};
$scope.setPage = function () {
$scope.currentPage = this.n;
};
// functions have been describe process the data for display
$scope.search();
};
ctrlRead.$inject = ['$scope', '$filter'];
函数ctrlRead（$scope，$filter）{
//初始化
$scope.sortingOrder=排序顺序；
$scope.reverse=false；
$scope.filteredItems=[]；
$scope.groupedItems=[]；
$scope.itemsPerPage=5；
$scope.pagedItems=[]；
$scope.currentPage=0；
$scope.items=[
{“id”：“1”，“姓名”：“约翰”，“国家”：“美国”}，
{“id”：“2”，“姓名”：“彼得”，“国家”：“伦敦”}]；
//初始化筛选的项目
$scope.nameSearch=函数（）{
$scope.filteredItems=$filter（'filter'）（$scope.items，函数（item）{
if（item.name.includes（$scope.name））{
返回true；
}
});
$scope.countrySearch=函数（）{
$scope.filteredItems=$filter（'filter'）（$scope.items，函数（item）{
if（项目国家包括（$scope.country））{
返回true；
}
});
$scope.currentPage=0；
//现在按页面分组
$scope.groupToPages（）；
};
//计算页面位置
$scope.groupToPages=函数（）{
$scope.pagedItems=[]；
对于（变量i=0；i<$scope.filteredItems.length；i++）{
如果（i%$scope.itemsPerPage==0）{
$scope.pagedItems[Math.floor（i/$scope.itemsPerPage）]=[$scope.filteredItems[i]]；
}否则{
$scope.pagedItems[Math.floor（i/$scope.itemsPerPage）].push（$scope.filteredItems[i]）；
}
}
};
$scope.range=函数（开始、结束）{
var-ret=[]；
如果（！结束）{
结束=开始；
开始=0；
}
对于（变量i=开始；i<结束；i++）{
再推（i）；
}
返回ret；
};
$scope.prevPage=函数（）{
如果（$scope.currentPage>0）{
$scope.currentPage--；
}
};
$scope.nextPage=函数（）{
如果（$scope.currentPage<$scope.pagedItems.length-1）{
$scope.currentPage++；
}
};
$scope.setPage=函数（）{
$scope.currentPage=this.n；
};
//函数描述了用于显示的数据处理
$scope.search（）；
};
ctrlRead.$inject=['$scope'，'$filter']；
希望这能对您有所帮助，我正在使用标准过滤器和其他两个下拉列表，通过它们我在表中进行过滤。
HTML代码
<div>
<label>Associated Products:</label>
<div class="row">
<div class="col-md-6">
<div class="col-md-4 custom-select">
<div class="custom-select-text">{{selected}}</div>
<select class="form-control select-area c-corporate-contact-us-from-select-country country-lang-select" data-widget="custom-select"
(change)="onSelectProductLine($event)" [(ngModel)]="selected">
<option value="0">Select a product line</option>
<option *ngFor="let ProductLine of productLines" value={{ProductLine.categoryId}}>
{{ProductLine.title}}
</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="col-md-4 custom-select" *ngIf="edited">
<div class="custom-select-text">{{selectedProduct}}</div>
<select class="form-control select-area c-corporate-contact-us-from-select-country country-lang-select" data-widget="custom-select"
(change)="onSelectProduct($event)" [(ngModel)]="selectedProduct">
<option value="0">Select a product</option>
<option *ngFor="let Product of products" value={{Product.categoryId}}>
{{Product.title}}
</option>
</select>
</div>
</div>
</div>
</div>
<div class="example-header">
<mat-form-field>
<input matInput (page)="changePage($event)" (keyup)="applyFilter($event.target.value)" placeholder="Search Products based on Product Numbers or Description or Associate Products">
</mat-form-field>
</div>
onSelectProductLine(args) {
if (args.target.value != 0)
this.edited = true;
else
this.edited = false;
this.dataservice.getProduct(args.target.value).subscribe(res => this.products = res);
this.selected = args.target.options[args.target.selectedIndex].text;
this.applyFilterTopLevelProduct(this.selected);
}
onSelectProduct(args) {
this.selectedProduct = args.target.options[args.target.selectedIndex].text;
this.applyFilterSecondLevelProduct(this.selectedProduct);
}
applyFilter(filterValue: string) {
debugger;
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
this.dataSource.filterPredicate =
(data: IFUsApi, filter: string) => {
let searchStr = (data.productNumbers + data.title + data.associatedProducts).toLowerCase();
return searchStr.indexOf(filter.toLowerCase()) != -1;
}
this.dataSource.filter = filterValue;
}
applyFilterTopLevelProduct(filterValue: string) {
debugger;
if (filterValue == "Select a product line")
filterValue = "";
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
this.dataSource.filterPredicate =
(data: IFUsApi, filter: string) => {
let searchStr = (data.toplevelProduct).toLowerCase();
return searchStr.indexOf(filter.toLowerCase()) != -1;
}
this.dataSource.filter = filterValue;
}
applyFilterSecondLevelProduct(filterValue: string) {
if (filterValue == "Select a product") {
filterValue = this.selected;
this.dataSource.filterPredicate =
(data: IFUsApi, filter: string) => {
let searchStr = (data.toplevelProduct).toLowerCase();
return searchStr.indexOf(filter.toLowerCase()) != -1;
}
this.dataSource.filter = filterValue;
}
else {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
this.dataSource.filterPredicate =
(data: IFUsApi, filter: string) => {
let searchStr = (data.associatedProducts).toLowerCase();
return searchStr.indexOf(filter.toLowerCase()) != -1;
}
this.dataSource.filter = filterValue;
}
}