我正在尝试从这里实现分页功能: 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"
}
]
我有一个如上所示的对象。
当我ng-repeat
<tr ng-repeat="skillTestsData in data.skillTests[currentPage] | orderBy:sortingOrder:reverse">
我遇到以下错误:
Error: [orderBy:notarray] Expected array but received: {"name":"Micro biology","id":"2747c7ecdbf85700bde15901cf961998","category":"Other","type":"Mandatory - No Certification","categoryid":"808ff269db7cd700bde15901cf9619f3"}
这是我的 HTML:
<script type="text/javascript">
var sortingOrder = 'name';
</script>
<tr ng-repeat="skillTestsData in data.skillTests[currentPage] | orderBy:sortingOrder:reverse"> ------- </tr>
这是我的客户端脚本:
function($scope, $filter) {
c.data.skillTests //which has my object
/*Pagination starts here new one */
// init
$scope.sortingOrder = sortingOrder;
$scope.reverse = false;
$scope.filteredItems = [];
$scope.groupedItems = [];
$scope.itemsPerPage = 5;
$scope.pagedItems = [];
$scope.currentPage = 0;
//$scope.items = [];
$scope.items = c.data.skillTests;
//serach and initialize start
var searchMatch = function (haystack, needle) {
if (!needle) {
return true;
}
return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
};
// init the 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;
});
// take care of the sorting order
if ($scope.sortingOrder !== '') {
$scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.sortingOrder, $scope.reverse);
}
$scope.currentPage = 0;
// now group by pages
$scope.groupToPages();
};
//serach 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;
};
// functions have been describe process the 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 ends here new one */
}
最佳答案
试试这个，从数组中删除 currentPage。
<tr ng-repeat="skillTestsData in data.skillTests | orderBy:sortingOrder:reverse"> ------- </tr>
另一种方式使用 limitTo:limit:skip
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="next()">Next</button>
Page : {{(skip/limit)+1}}
Limit : {{::limit}}
<ul>
<li ng-repeat="item in items | limitTo:limit:skip">{{item}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.items = [1,2,3,4,5,6,7,8,9,10];
$scope.limit = 2;
$scope.skip= 0;
$scope.next = function(){
$scope.skip= $scope.skip+$scope.limit;
}
});
</script>
</body>
</html>关于javascript - 错误 : [orderBy:notarray] Expected array but received: {}，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49314438/