角UI分页引导里面没有ui.bootstrap.tabs工作 [英] Angular UI bootstrap pagination not working inside ui.bootstrap.tabs

查看：324
本文介绍了角UI分页引导里面没有ui.bootstrap.tabs工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

角UI引导给人真棒解决方案。很不巧的分页（ui.bootstrap.pagination）不工作里面的标签（ui.bootstrap.tabs）

DEMO http://plnkr.co/edit / mLBkDwEVY6SIh5oCyy0K？p = preVIEW

\r
\r

angular.module（'mytodos'，['ui.bootstrap']）。控制器（'TodoController'，函数（$范围）{\r
  $ scope.filteredTodos = [];\r
  $ scope.currentPage = 1;\r
  $ scope.numPerPage = 10;\r
  $ scope.maxSize = 5;\r
  $ scope.todos = [{\r
    标识：1，\r
    日期：12-JAN-2015，\r
    cheque_no：11111，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：2，\r
    日期：22日​​至2015年，\r
    cheque_no：222222，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：3，\r
    日期：14日至2015年，\r
    cheque_no：33333，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：4，\r
    日期：16日至4月2015年\r
    cheque_no：44444，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：5，\r
    日期：30月 - 2015年，\r
    cheque_no：55555，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：6，\r
    日期：22日​​至2015年，\r
    cheque_no：222222，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：7，\r
    日期：14日至2015年，\r
    cheque_no：33333，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：8，\r
    日期：16日至4月2015年\r
    cheque_no：44444，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：9，\r
    日期：30月 - 2015年，\r
    cheque_no：55555，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：10，\r
    日期：22日​​至2015年，\r
    cheque_no：222222，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：11，\r
    日期：14日至2015年，\r
    cheque_no：33333，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：12，\r
    日期：16日至4月2015年\r
    cheque_no：44444，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：13，\r
    日期：30月 - 2015年，\r
    cheque_no：55555，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：14，\r
    日期：22日​​至2015年，\r
    cheque_no：222222，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：15，\r
    日期：14日至2015年，\r
    cheque_no：33333，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：16，\r
    日期：16日至4月2015年\r
    cheque_no：44444，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：17，\r
    日期：30月 - 2015年，\r
    cheque_no：55555，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：18，\r
    日期：22日​​至2015年，\r
    cheque_no：222222，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：19，\r
    日期：14日至2015年，\r
    cheque_no：33333，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：20，\r
    日期：16日至4月2015年\r
    cheque_no：44444，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：21，\r
    日期：30月 - 2015年，\r
    cheque_no：55555，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：22，\r
    日期：22日​​至2015年，\r
    cheque_no：222222，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：23，\r
    日期：14日至2015年，\r
    cheque_no：33333，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：24，\r
    日期：16日至4月2015年\r
    cheque_no：44444，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：25，\r
    日期：30月 - 2015年，\r
    cheque_no：55555，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：26，\r
    日期：30月 - 2015年，\r
    cheque_no：55555，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：27，\r
    日期：22日​​至2015年，\r
    cheque_no：222222，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：28，\r
    日期：14日至2015年，\r
    cheque_no：33333，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：29，\r
    日期：16日至4月2015年\r
    cheque_no：44444，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：30，\r
    日期：30月 - 2015年，\r
    cheque_no：55555，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：31，\r
    日期：30月 - 2015年，\r
    cheque_no：55555，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：32，\r
    日期：22日​​至2015年，\r
    cheque_no：222222，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：33，\r
    日期：14日至2015年，\r
    cheque_no：33333，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：34，\r
    日期：16日至4月2015年\r
    cheque_no：44444，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：35，\r
    日期：30月 - 2015年，\r
    cheque_no：55555，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：36，\r
    日期：30月 - 2015年，\r
    cheque_no：55555，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：37，\r
    日期：22日​​至2015年，\r
    cheque_no：222222，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：38，\r
    日期：14日至2015年，\r
    cheque_no：33333，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：39，\r
    日期：16日至4月2015年\r
    cheque_no：44444，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }，{\r
    ID：40，\r
    日期：30月 - 2015年，\r
    cheque_no：55555，\r
    撤回：126.01，\r
    定金：236.00，\r
    平衡：953.00\r
  }];\r
\r
  $范围。$表（当前页+ numPerPage'，函数（）{\r
    VAR开始=（（$ scope.currentPage - 1）* $ scope.numPerPage）\r
      最终=开始+ $ scope.numPerPage;\r
    $ scope.filteredTodos = $ scope.todos.slice（开始，结束）;\r
  }）;\r
}）;

\r

.box的{\r
  边框：1px的固体#DDD;\r
  填充：10px的;\r
  位置：相对;\r
  背景：#FFF;\r
  保证金：0 0 10px的;\r
}\r
.TAB内容＆GT; .TAB窗格＆GT; .box的{\r
  边境顶：无;\r
}\r
.TAB内容＆GT; .box的{\r
  边境顶：无;\r
}

\r

＆LT;链接HREF =htt​​p://maxcdn.bootstrapcdn.com/bootstrap /3.3.1/css/bootstrap.min.css的rel =stylesheet属性/＆GT;\r
＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =htt​​p://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js＆GT;＆下; /脚本＆GT;\r
＆LT; D​​IV NG-应用=mytodosNG控制器=TodoController＆GT;\r
  ＆LT; D​​IV CLASS =容器＆GT;\r
\r
    ＆LT;＆标签集GT;\r
      ＆LT;标签＆gt;\r
        ＆LT;标签，标题为GT;＆声明LT; /制表标题＆GT;\r
        ＆LT; D​​IV CLASS =盒子＆GT;\r
          ＆LT; H1＆GT;＆托多斯LT; / H1＆GT;\r
          ＆LT; H4＆GT; {{todos.length}}总与LT; / H4＆GT;\r
          ＆LT; UL＆GT;\r
            ＆LT;李NG重复=待办事项中filteredTodos＆GT; {{todo.id}}指数：{{$指数}}＆LT; /李＆GT;\r
          ＆LT; / UL＆GT;\r
          ＆LT;分页NG模型=当前页总项=todos.length最大规模=最大范围边界链接=真正的＆GT;\r
          ＆LT; /分页＆GT;\r
        ＆LT; / DIV＆GT;\r
      ＆LT; /标签＆gt;\r
    ＆LT; /标签集＆GT;\r
  ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r
\r


解决方案

您 $观看不起作用！如果你把的console.log（$ scope.currentPage）你的 $观看函数里，你会看到，将有无输出时的页面变化。

我推荐使用 NG-变化分页元素和范围（而不是$表）定义一个函数！

http://angular-ui.github.io/bootstrap/#/分页

要确保在当前页模型更新，您可以设置一个对象，而不是仅仅是一个整数（关键范围继承！）

  // JS
$ scope.pagination = {当前页：1};
// HTML
＆LT;分页NG模型=pagination.currentPage＆GT;

我建议你阅读这篇文章： https://github.com/angular/ angular.js /维基/了解，斯科普斯

Angular UI bootstrap gives awesome solutions. Very unfortunately Pagination (ui.bootstrap.pagination) does not working inside Tabs (ui.bootstrap.tabs)

DEMO http://plnkr.co/edit/mLBkDwEVY6SIh5oCyy0K?p=preview

angular.module('mytodos', ['ui.bootstrap']).controller('TodoController', function($scope) {
  $scope.filteredTodos = [];
  $scope.currentPage = 1;
  $scope.numPerPage = 10;
  $scope.maxSize = 5;
  $scope.todos = [{
    "id": 1,
    "date": "12-Jan-2015",
    "cheque_no": 11111,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 2,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 3,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 4,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 5,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 6,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 7,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 8,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 9,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 10,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 11,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 12,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 13,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 14,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 15,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 16,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 17,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 18,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 19,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 20,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 21,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 22,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 23,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 24,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 25,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 26,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 27,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 28,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 29,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 30,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 31,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 32,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 33,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 34,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 35,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 36,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 37,
    "date": "22-February-2015",
    "cheque_no": 222222,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 38,
    "date": "14-March-2015",
    "cheque_no": 33333,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 39,
    "date": "16-April-2015",
    "cheque_no": 44444,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }, {
    "id": 40,
    "date": "30-May-2015",
    "cheque_no": 55555,
    "withdraw": 126.01,
    "deposit": 236.00,
    "balance": 953.00
  }];

  $scope.$watch('currentPage + numPerPage', function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage),
      end = begin + $scope.numPerPage;
    $scope.filteredTodos = $scope.todos.slice(begin, end);
  });
});

.box {
  border: 1px solid #DDD;
  padding: 10px;
  position: relative;
  background: #FFF;
  margin: 0 0 10px;
}
.tab-content > .tab-pane > .box {
  border-top: none;
}
.tab-content > .box {
  border-top: none;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<div ng-app="mytodos" ng-controller="TodoController">
  <div class="container">

    <tabset>
      <tab>
        <tab-heading>Statement</tab-heading>
        <div class="box">
          <h1>Todos</h1>
          <h4>{{todos.length}} total</h4>
          <ul>
            <li ng-repeat="todo in filteredTodos">{{todo.id}} Index: {{$index}}</li>
          </ul>
          <pagination ng-model="currentPage" total-items="todos.length" max-size="maxSize" boundary-links="true">
          </pagination>
        </div>
      </tab>
    </tabset>
  </div>
</div>

解决方案

Your $watchdoesn't work! If you put console.log($scope.currentPage) inside your $watch function you will see, that there will be no output when the page changes.

I recommend using ng-change on the pagination element and define a function on the scope (instead of the $watch)!

@see http://angular-ui.github.io/bootstrap/#/pagination

To make sure that the currentPage model is updated you can set an object instead of just an integer (key to scope inheritance!)

// JS
$scope.pagination = { currentPage: 1 };
// HTML
<pagination ng-model="pagination.currentPage">

I recommend reading this article: https://github.com/angular/angular.js/wiki/Understanding-Scopes

这篇关于角UI分页引导里面没有ui.bootstrap.tabs工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆