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>
4

2 回答 2

12

利用ng-change

Angular 引导分页可以使用该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

在此处查看对代码的重大更改。

于 2013-10-02T08:39:09.577 回答
7

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

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

于 2013-09-06T20:06:16.867 回答