使用angularjs bootstrap进行分页

Question

使用angularjs bootstrap进行分页

我试图按照这里的例子进行分页.

我已经能够进入一个能够显示新页码的阶段,但我无法触发点击事件.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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Vis*_*sya 12

使用 `ng-change`

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

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

Run Code Online (Sandbox Code Playgroud)

对于旧版本<= 0.11

您可以在控制器中定义一个函数,并使用on-select-change以下命令将其传递给:

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

Run Code Online (Sandbox Code Playgroud)

在这里查看更多:https: //github.com/angular-ui/bootstrap/blob/master/src/pagination/docs/readme.md

请在此处查看代码的重大更改.

值得一提的是,在最近的修订版中删除了"on-select-page"(https://github.com/angular-ui/bootstrap/commit/d65901cff87ab895df997a803222f94ac223e9d3).`on-select-page`现在是`ng-change`. (13认同)

Answer 2

m.e*_*roy 7

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

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

归档时间：	12 年，2 月前
查看次数：	27185 次
最近记录：	9 年，7 月前

使用angularjs bootstrap进行分页

使用 ng-change

对于旧版本<= 0.11

使用 `ng-change`