Question

我正在尝试从这里实现分页功能： 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">

我收到以下错误：

错误：[orderBy：notarray]预期数组但收到：{＆＃34; name＆＃34;：＆＃34; Micro biology＆＃34;，＆＃34; id＆＃34;：＆＃34; 2747c7ecdbf85700bde15901cf961998＆＃ 34;，＆＃34;类别＆＃34;：＆＃34;其他＆＃34;，＆＃34;类型＆＃34;：＆＃34;强制性 - 无认证＆＃34;，＆＃34; categoryid＆＃34; ：＆＃34; 808ff269db7cd700bde15901cf9619f3＆＃34;}

这是我的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 */


}

Answer 1

试试这个，从数组中删除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>

错误：[orderBy：notarray]预期的数组但收到：{}

1 个答案: