Question

按下“按我”按钮后，如何进入下一页？这是我的代码：

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="PaginationDemoCtrl">

    <pagination num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
    The selected page no: {{currentPage}}
</div>

<button>Press me</button>

  </body>
</html>

http://plnkr.co/edit/NVgCX8nrx0ovnCWE2eok?p=preview

Answer 1

...你的问题很模糊，但我相信这就是你要找的东西：

<button value='Press me' onClick='document.location="./NVgCX8nrx0ovnCWE2eok?p=preview"'>

Answer 2

在你的html中，将你的控制器移动到body标签，并为按钮添加一个click事件

<!doctype html>
<html ng-app="plunker">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
        <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
        <script src="example.js"></script>
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    </head>
    <body ng-controller="PaginationDemoCtrl">
        <div>
            <pagination num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
            The selected page no: {{currentPage}}
        </div>
        <button ng-click="goToNext()">Press me</button>
    </body>
</html>

在脚本中添加一个函数来处理click事件。我只是增加当前的页码。

angular.module('plunker', ['ui.bootstrap']);
var PaginationDemoCtrl = function($scope) {
  $scope.noOfPages = 20;
  $scope.currentPage = 4;
  $scope.maxSize = 5;

  $scope.setPage = function(pageNo) {
    $scope.currentPage = pageNo;
  };

  $scope.goToNext = function() {
    $scope.currentPage = ++$scope.currentPage;
  };
};

Answer 3

<强> Link to Plunk

将ng-controller="PaginationDemoCtrl"移至正文标记。
将指令添加到按钮ng-click="setPage(currentPage+1)

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body ng-controller="PaginationDemoCtrl">

    <div>
      <pagination num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
      The selected page no: {{currentPage}}
    </div>

    <button ng-click="setPage(currentPage+1)">Press me</button>
  </body>
</html>

从分页中选择一个单独的按钮时转到下一页？

3 个答案: