如何在Angular JS中使用分页应用多个过滤器？

Question

I am trying to apply multiple filters with pagination in Angular JS i am able to paginate the results with one filter but whenever there is multiple filters i am unable do it OR is performing among two filters instead of AND please help me to achieve this any help will be greatly appreciated. 我试图在Angular JS应用带有分页的多个过滤器，我能够使用一个过滤器对结果进行分页，但是每当有多个过滤器时，我都无法做到这一点， OR在两个过滤器中执行而不是在执行， AND请帮助我实现此帮助将不胜感激。 here is my code. 这是我的代码。 Here is my index.html 这是我的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>

And here is my script. 这是我的脚本。

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'];

Answer 1

Hope this will help you, I am using standard filter and 2 other drop downs through which I am doing filter in table. 希望这对您有帮助，我正在使用标准过滤器和另外2个下拉列表，通过它们我可以在表中进行过滤。 HTML Code 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>

JS Code JS代码

  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;
    }
  }

如何在Angular JS中使用分页应用多个过滤器？

问题描述

1 个解决方案

解决方案1
0 2018-04-26 09:20:09

如何在Angular JS中使用分页应用多个过滤器？

问题描述

1 个解决方案

解决方案1 0 2018-04-26 09:20:09

解决方案1
0 2018-04-26 09:20:09