使用 angularjs 引导分页答案

【问题标题】：Paging using angularjs bootstrap使用 angularjs 引导分页
【发布时间】：2016-04-19 17:40:49
【问题描述】：

我正在尝试按照示例 here 进行分页。

我已经能够进入可以显示新页码的阶段，但我无法触发点击事件。在下面的示例中，我该怎么做才能在寻呼机上触发data-ng-click="setPage()"

<!doctype html>
<html ng-app="PagingModule">
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script type="text/javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js"></script>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"
        rel="stylesheet">
    <script type="text/javascript">

        var PagingModule = angular.module('PagingModule', ['ui.bootstrap']);

        PagingModule.controller('PaginationCtrl', function PaginationCtrl($scope) {


            $scope.noOfPages = 7;
            $scope.currentPage = 1;

            $scope.setPage = function () {
                alert("in");//I am unable to reach this code

            };
        }
        );


    </script>
</head>
<body>
    <div ng-controller="PaginationCtrl" class="well well-small">
        <pagination data-ng-click="setPage()" boundary-links="true" num-pages="noOfPages"
            current-page="currentPage" class="pagination-small" previous-text="&lsaquo;"
            next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
        {{currentPage}}
    </div>
</body>
</html>

【问题讨论】：

标签： angularjs pagination

【解决方案1】：

使用`ng-change`

Angular 引导分页可以使用ng-change 属性。它表示当分页改变时可以调用的函数。使用ng-model获取当前页面：

<pagination ... ng-change="setPage()" ng-model="current_page"></pagination>

对于旧版本

你可以在控制器中定义一个函数并使用on-select-change传递一个属性：

<pagination ... on-select-change="setPage(page)"></pagination>

查看代码 here 的重大更改。

【讨论】：

认为值得一提的是 on-select-page 已在 recent revision 中删除。 on-select-page 现在是 ng-change。

【解决方案2】：

angular-ui 的pagination 指令没有data-ng-click 属性。单击其中一个页码会在您的控制器中设置$scope.currentPage 变量，或者您在属性current-page="currentPage" 中设置的任何内容

您可以在该变量上设置$scope.$watch 以响应更改。

【讨论】：

使用ng-change

对于旧版本

使用`ng-change`