将自定义 ng-repeat 分页与 Controller 绑定

Question

我正在使用 ng-repeat 创建自定义分页，但问题是我想将分页绑定到控制器...这样当我单击分页按钮时它应该在视图中显示该内容..

app.controller("pagCtrl", function ($scope, $xml) {
        $scope.myobj = obj;
        $scope.viewby = 1;
        $scope.totalItems = $scope.myobj.ques.length;
        $scope.currentPage = 1;
        $scope.itemsPerPage = $scope.viewby;
        $scope.maxSize = 5;
        $scope.setPage = function (pageNo) {
            $scope.currentPage = pageNo;
        };
        $scope.pageChanged = function () {
        };
        $scope.setItemsPerPage = function (num) {
            $scope.itemsPerPage = num;
            $scope.currentPage = 1;
        }

我的观点

<div ng-controller="pagctrl">
</div>

我的自定义 bootstrap 代码

<ul class="pagination ">
<li ng-repeat=" opt in myobj.ques"  >

<a href="">{{ $index+1 }}</a>
    </li>
</ul>

我想将它与控制器绑定，这样当我按下 1 时，它应该在 div 中显示内容 1，当我按下按钮 2 时，它应该在视图中显示内容 2

Answer 1

您需要总页数；

$scope.totalPages = $scope.totalItems/$scope.maxSize;

app.controller("pagCtrl", function ($scope, $xml) {
        $scope.myobj = obj;
        $scope.viewby = 1;
        $scope.totalItems = $scope.myobj.ques.length;

        $scope.currentPage = 1;
        $scope.itemsPerPage = $scope.viewby;
        $scope.maxSize = 5;
        $scope.totalPages = $scope.totalItems/$scope.maxSize;
        $scope.setPage = function (pageNo) {
            $scope.currentPage = pageNo;
        };
        $scope.pageChanged = function () {
        };
        $scope.setItemsPerPage = function (num) {
            $scope.itemsPerPage = num;
            $scope.currentPage = 1;
        }

<ul class="pagination ">
  <li ng-repeat=" ng-repeat="n in [] | range:totalPages""  >

    <a href="">{{ $index+1 }}</a>
  </li>
</ul>

Answer 2

为您的申请筛选

location_manager.filter('pagination', function() {
    return function(input, start) {
        start = +start;
        return input.slice(start);
    };
});

分页Div

<--Pagination div --->

<div class="pagination-div" ng-show="datalists.length">
<ul>
 <li>
  <button type="button" ng-disabled="curPage == 0"
 ng-click="curPage=curPage-1">PREV</button>
 </li>
 <li>
 <span>Page {{curPage + 1}} of {{ numberOfPages() }}</span>
 </li>
 <li>
 <button type="button"
 ng-disabled="curPage >= datalists.length/pageSize - 1"
 ng-click="curPage = curPage+1">NEXT </button>
 </li>
</ul>
</div>

控制器

angular.module('sampleproject').controller( 'SampleController',
function ($rootScope, $scope ,samplefactoryService )
{

// pagination
 $scope.curPage = 0;
 $scope.pageSize = 5;
 $scope.datalists = data ;// response from service

$scope.numberOfPages = function() 
 {
 return Math.ceil($scope.datalists.length / $scope.pageSize);
 };

});

将自定义 ng-repeat 分页与 Controller 绑定

bind custom ng-repeat pagination with Controller

pagination

angularjs

angularjs-directive

angular-ui-bootstrap