使用angularjs bootstrap进行分页

发布时间：2020-12-17 17:06:48 所属栏目：安全来源：网络整理

导读：我试图按照示例 here进行分页. 我已经能够进入一个能够显示新页码的阶段,但我无法触发点击事件.在下面的示例中,我可以做什么来触发寻呼机上的数据-ng-click =“setPage()” !doctype htmlhtml ng-app="PagingModule"head script type="text/javascript" src=

我试图按照示例 here进行分页.

我已经能够进入一个能够显示新页码的阶段,但我无法触发点击事件.在下面的示例中,我可以做什么来触发寻呼机上的数据-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>

解决方法

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!