Question

我正在尝试按照示例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>

Answer 1

使用`ng-change`

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

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

旧版本＆lt; = 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

查看代码here的重大更改。

Answer 2

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

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

使用angularjs bootstrap进行分页

2 个答案:

使用`ng-change`

旧版本＆lt; = 0.11

使用angularjs bootstrap进行分页

2 个答案:

使用ng-change

旧版本＆lt; = 0.11

使用`ng-change`