使用AngularJS Bootstrap实现分页

Question

使用AngularJS Bootstrap实现分页

3

我正在尝试跟随这里的分页示例。

我已经能够显示新页面号，但无法触发点击事件。在下面的示例中，我该如何触发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>

- developer747

2个回答

7

angular-ui的pagination指令没有data-ng-click属性。点击其中一页会在您的控制器中设置$scope.currentPage变量，或者使用current-page="currentPage"属性设置其他变量。

您可以在该变量上设置$scope.$watch以对更改作出反应。

- m.e.conroy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Visya · Accepted Answer

使用 `ng-change`

Angular Bootstrap 分页器可以使用 ng-change 属性，它表示当分页改变时会调用的函数。通过 ng-model 获取当前页：

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

对于旧版本 <= 0.11

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

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

更多信息请参见： https://github.com/angular-ui/bootstrap/blob/master/src/pagination/docs/readme.md

查看代码的重大变化，请在此处查看。

使用AngularJS Bootstrap实现分页

使用 ng-change

对于旧版本 <= 0.11

使用 `ng-change`