Я новичок в 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>
А это мой app.js
var jobResApp=angular.module('jobResApp',[]);
Контроллер.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" : [ ]
} ]
