使用angularjs bootstrap进行分页

前端之家收集整理的这篇文章主要介绍了使用angularjs bootstrap进行分页前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图按照示例 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以响应更改.

猜你在找的Angularjs相关文章