Looking to incorporate pagination functionality from this source: http://jsfiddle.net/SAWsA/11/
[
{
"name": "Micro biology",
"id": "2747c7ecdbf85700bde15901cf961998",
"category": "Other",
"type": "Mandatory - No Certification",
"categoryid": "808ff269db7cd700bde15901cf9619f3"
},
{
"name": "Java Fundamentals",
"id": "5475f2a0dbf85700bde15901cf961964",
"category": "IT",
"type": "Mandatory - No Certification",
"categoryid": "2b5e7e29db7cd700bde15901cf961917"
}
]
An object like the one above is what I've been working with.
Whenever I use ng-repeat
<tr ng-repeat="skillTestsData in data.skillTests[currentPage] | orderBy:sortingOrder:reverse">I encounter the following error:
Error: [orderBy:notarray] Expected array but received: {"name":"Micro biology","id":"2747c7ecdbf85700bde15901cf961998","category":"Other","type":"Mandatory - No Certification","categoryid":"808ff269db7cd700bde15901cf9619f3"}
Below is my HTML:
<script type="text/javascript">
var sortingOrder = 'name';
</script>
<tr ng-repeat="skillTestsData in data.skillTests[currentPage] | orderBy:sortingOrder:reverse"> ------- </tr>
Client script snippet:
function($scope, $filter) {
c.data.skillTests //contains object data
/*Pagination functionality begins */
// Initialization
$scope.sortingOrder = sortingOrder;
$scope.reverse = false;
$scope.filteredItems = [];
$scope.groupedItems = [];
$scope.itemsPerPage = 5;
$scope.pagedItems = [];
$scope.currentPage = 0;
// Initialize items
$scope.items = c.data.skillTests;
// Search and initialize start
var searchMatch = function (haystack, needle) {
if (!needle) {
return true;
}
return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
};
// Initialize filtered items
$scope.search = function () {
$scope.filteredItems = $filter('filter')($scope.items, function (item) {
for(var attr in item) {
if (searchMatch(item[attr], $scope.query))
return true;
}
return false;
});
// Sorting order handling
if ($scope.sortingOrder !== '') {
$scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.sortingOrder, $scope.reverse);
}
$scope.currentPage = 0;
// Group by pages
$scope.groupToPages();
};
// Search and initialize end
// 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;
};
// Process data for display
$scope.search();
// Change sorting order
$scope.sort_by = function(newSortingOrder) {
if ($scope.sortingOrder == newSortingOrder)
$scope.reverse = !$scope.reverse;
$scope.sortingOrder = newSortingOrder;
// Icon setup
$('th i').each(function(){
// Icon reset
$(this).removeClass().addClass('icon-sort');
});
if ($scope.reverse)
$('th.'+new_sorting_order+' i').removeClass().addClass('icon-chevron-up');
else
$('th.'+new_sorting_order+' i').removeClass().addClass('icon-chevron-down');
};
/*Pagination functionality ends */
}