如何在 angularjs 中使用过滤进行分页

Question

我是 angularJs 的新手，现在我正在使用 filtering.In 进行分页，这个过程我遇到了一些问题，当应用过滤器时它会提供过滤后的数据，但该数据未打印关于他们各自的 pages.So 请给出一些建议，如何在 angularJs 中通过过滤对分页进行分组。以下是我的代码片段。

 <div class="col-md-12 form-box pdng-0">
                <select class="form-control2" ng-change="applyFilterOnWorkAuthDrp()" ng-model="workAuthName">
                    <option value="">--- Select Work Authorization ---</option> 
                    <option ng-repeat="workAuth in workAuthArray"  value="{{workAuth}}">{{workAuth}}</option>
                </select>
            </div>
            <div class="col-md-12 form-box pdng-0">
                <select class="form-control2" ng-change="applyFilterOnPrefEmpDrp()" ng-model="prefEmpName">
                    <option value="">--- Select Pref.Employments ---</option> 
                    <option ng-repeat="prefEmp in prefEmpArray"  value="{{prefEmp}}">{{prefEmp}}</option>
                </select>
            </div>
            <span ng-cloak  ng-repeat="jsList in filtered = jobSeekerList |startFrom:(pageno*pageSize)-pageSize | limitTo:pageSize                                                                      
                                     |filter:workAuthFilter                                                                             
                                     |filter:prefEmpFilter">
            <div class="col-md-12 job-resp-list">
              <div class="col-md-12">
                    <h4 class="job-title blue"><span class="slct-box2"><input type="checkbox"></span>{{jsList.firstName}}&nbsp;{{jsList.lastName}}</h4>
                                                    </div>
                    .
                    .
                    .
                    .
              </div>
            </div>
            </span>
<!--pagination-->
 <ul class="nav nav-pills">
           <li class="active" ng-if="pageno>=1"><a data-toggle="pill" href="#page1" ng-click="pageno==1?'':doPagination('back')">Back</a></li>
           <li><a data-toggle="pill" href="#">Showing {{pageno}} of {{totalPages}}</a></li>
           <li ng-if="totalPages>1"><a data-toggle="pill" href="#page2" ng-click="pageno==totalPages?'':doPagination('next')" >Next</a></li>
  </ul>

这是我的 app.js

var jobResApp=angular.module('jobResApp',[]);

Controller.js

var jobResApp = angular.module('jobResApp');
jobResApp.controller("jobResController",['$scope','$filter','jobResService',function ($scope,$filter,jobResService){
    $scope.Math=window.Math;
    $scope.pageno = 1;
    $scope.pageSize = 1;
    var count=0;
    jobResService.findJobResponse().then(function(data){
        $scope.totalPages=data.length;
        return $scope.jobSeekerList=data;
    });
    jobResService.getWorkAuth().then(function(data){
        var outputArray=[];
        $.each(data,function(value,key){
            outputArray.push(key);
        });
        $scope.workAuthArray=outputArray;
        return  $scope.workAuthArray;
    });
    jobResService.getPrefEmploymentService().then(function(data){
        var outputArray=[];
        $.each(data,function(value,key){
            outputArray.push(key);
        });
        $scope.prefEmpArray=outputArray;
        return  $scope.prefEmpArray;
    });
    $scope.applyFilterOnWorkAuthDrp=function(){
        var arr=[];
        $scope.workAuthFilter = function(jobSeekerVo) {  
            if(jobSeekerVo.workAuth==$scope.workAuthName){
                arr.push(jobSeekerVo);
                console.log(arr);
                return true;
             }

        } 


    };

    $scope.applyFilterOnPrefEmpDrp=function(){

        $scope.prefEmpFilter=function (jobSeekerVo) {        
            var prefEmpArray=[];
            angular.forEach(jobSeekerVo.prefEmp,function(value,key){
                value==$scope.prefEmpName?prefEmpArray.push(true):prefEmpArray.push(false);
            });
            if(prefEmpArray.includes(true)){
                return true;
            }
        }
        ///$scope.pageSize = 1;
    //  $scope.numberOfPages = Math.ceil($scope.jobSeekerList.length / $scope.pageSize);
        //return $scope.jobSeekerList;
    };

    $scope.doPagination=function(type){
        if(type=='next')
        {
            $scope.pageno=$scope.pageno+1;
        }
        else
        {
            $scope.pageno=$scope.pageno-1;
        }
    };
}]);
jobResApp.filter('startFrom', function() {
     return function(input, start) {
            if (!input || !input.length) { return; }
            start = +start; //parse to int
            return input.slice(start);
        }
});

我正在从外部服务获取数据，数据格式如下

[ {
  "jobSeekerId" : "3",
  "firstName" : "yamma",
  "lastName" : "watson",
  "appliedDate" : "01 May 2017",
  "skill" : [ "10z31 Exchanges", "10 Key" ],
  "prefEmp" : [ "Contract - Independent" ],
  "workAuth" : null,
  "academicInfoVo" : [ {
    "academicInfoId" : 0,
    "courseName" : "Aviation",
    "universityName" : "Amridge University",
    "academicEndYear" : 2017
  } ],
  "annualSalary" : "0",
  "experience" : "0",
  "currentDesignation" : null,
  "lastModifiedDate" : "05-Apr-2017",
  "currentCity" : null,
  "currentState" : null,
  "prefCity" : [ "Los Angeles", "New York city", "San Antonio" ]
}, {
  "jobSeekerId" : "1",
  "firstName" : "richal",
  "lastName" : "sow",
  "appliedDate" : "03 May 2017",
  "skill" : [ "10z31 Exchanges", "10 Key", "1H NMR", "21st Century Skills" ],
  "prefEmp" : [ "Full-time" ],
  "workAuth" : "US Citizen",
  "academicInfoVo" : [ {
    "academicInfoId" : 0,
    "courseName" : "Aviation",
    "universityName" : "Alabama Agriculture And Mechanical University",
    "academicEndYear" : 2014
  } ],
  "annualSalary" : "20000",
  "experience" : "60",
  "currentDesignation" : "Designer",
  "lastModifiedDate" : "05-May-2014",
  "currentCity" : "New York city",
  "currentState" : "New York",
  "prefCity" : [ "New York city", "Houston", "Chicago", "Los Angeles", "Philadelphia" ]
}, {
  "jobSeekerId" : "2",
  "firstName" : "2we",
  "lastName" : "surya",
  "appliedDate" : "02 May 2017",
  "skill" : [ "10z31 Exchanges", "10 Key", "5.1 Mixing" ],
  "prefEmp" : [ "Full-time" ],
  "workAuth" : "US Citizen",
  "academicInfoVo" : [ {
    "academicInfoId" : 0,
    "courseName" : "Aviation",
    "universityName" : "Alabama State University",
    "academicEndYear" : 2015
  } ],
  "annualSalary" : "0",
  "experience" : "0",
  "currentDesignation" : null,
  "lastModifiedDate" : "15-Apr-2013",
  "currentCity" : null,
  "currentState" : null,
  "prefCity" : [ "New York city", "Houston", "Chicago", "Phoenix" ]
}, {
  "jobSeekerId" : "4",
  "firstName" : "Satya",
  "lastName" : "Botta",
  "appliedDate" : "21 Apr 2017",
  "skill" : [ "10z31 Exchanges" ],
  "prefEmp" : [ "Contract - Corp-to-Corp" ],
  "workAuth" : null,
  "academicInfoVo" : [ {
    "academicInfoId" : 0,
    "courseName" : "B.A",
    "universityName" : "Andrew Jackson University",
    "academicEndYear" : 2015
  } ],
  "annualSalary" : "0",
  "experience" : "0",
  "currentDesignation" : null,
  "lastModifiedDate" : null,
  "currentCity" : "Houston",
  "currentState" : "Texas",
  "prefCity" : [ ]
} ]

Answer 1

最后我得到了 solutions.I 刚刚实现的分页以及使用 ui.bootstrap 分页指令和上面注释示例的过滤器。这是我遵循的文档

 https://github.com/angular-ui/bootstrap/tree/master/src/pagination/docs

下面link是我的作品plunker.I希望对大家有所帮助遇到同样问题的人。

http://plnkr.co/edit/plhWxXGSPPtfx1WUSw0o?p=preview

如何在 angularjs 中使用过滤进行分页

How to do pagination with filtering in angularjs

javascript

angularjs

pagination

angularjs-filter

这是我的 app.js

Controller.js