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

时间:2015-10-09 09:44:17

标签: angularjs angularjs-directive pagination angular-ui-bootstrap

我正在使用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>

我的自定义引导代码

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

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

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

1 个答案:

答案 0 :(得分: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>