我是angularJs的新手，现在我正在对过滤进行分页。在这个过程中我遇到了一些问题，在应用过滤器时会给出过滤数据，但是数据不会在各自的页面上打印。所以请给出一些建议，如何使用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}} {{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>
var jobResApp=angular.module('jobResApp',[]);
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" : [ ]
} ]
答案 0 :(得分：1)
最后我得到了解决方案。我刚刚使用ui.bootstrap分页指令和上面评论的示例实现了分页和过滤器。 这是我遵循的文档
https://github.com/angular-ui/bootstrap/tree/master/src/pagination/docs
以下链接是我的工作人员。我希望这将有助于全力以赴 那些面临同样问题的人。