I'm new to angularJs ,present I'm doing pagination with filtering.In the process I'm getting some problem,when applying filter it giving filtered data but that data is not printing on their respective pages.So please give some suggestions to, how to group the pagination with filtering in angularJs .The following is my snippet.
<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>
And this is my 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);
}
});
And I am getting data from an external Service the data is in the following form
[ {
"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" : [ ]
} ]
