Bootstrap3でAngularJSを使用　pagination | VPSサーバーでWebサイト公開　備忘録　~Linux、MySQLからAJAXまで

“Angular-ui bootstrap”を使用して、Bootstrap3のJavaScript部分をAngularJSに置き換えることができます。今回はpaginationのサンプルを作成しました。
　
※オンラインマニュアル
Angular directives for Bootstrap

Angular-ui bootstrap : 2.5.0
AngularJS : 1.6.5
Bootstrap : 3.3.7
　


<!DOCTYPE html>
<html ng-app="demoApp">
  <head>
......
    <script src="../js/angular-1.6.5.min.js"></script>
    <script src="../js/ui-bootstrap-tpls-2.5.0.min.js"></script>
    <link href="../js/app.js">
    <link href="../css/bootstrap-3.3.7.min.css" rel="stylesheet">
  </head>
.....
<div ng-controller="PaginationDemoCtrl">
  <ul uib-pagination total-items="totalitems"
              ng-model="currentpage"
              max-size="maxsize"
              items-per-page="itemsperpage"
              class="pagination-sm"
              previous-text="前へ"
              next-text="次へ"
              first-text="最初"
              last-text="最後"
              boundary-links="true">
  </ul>
  <ul>
    <li ng-repeat="item in currentitems">
      <p>{{item.id}}：{{item.content}}</p>
    </li>
  </ul>
  <ul uib-pagination total-items="totalitems"
              ng-model="currentpage"
              max-size="maxsize"
              items-per-page="itemsperpage"
              class="pagination-sm"
              previous-text="前へ"
              next-text="次へ"
              first-text="最初"
              last-text="最後"
              boundary-links="true"
              rotate="false">
  </ul>
</div>

var demoApp = angular.module('demoApp', ['ui.bootstrap']);

demoApp.controller("PaginationDemoCtrl", function($scope) {
  $scope.items = [
    {id:1,content: "記事１の中身です。"},
    {id:2,content: "記事２の中身です。"},
・・・・
    {id:30,content: "記事３０の中身です。"}
  ];
  $scope.maxsize = 5;
  $scope.itemsperpage = 2;
  $scope.totalitems = $scope.items.length;
  $scope.currentpage = 1;
  var start = 0;
  var end = start + $scope.itemsperpage;
  $scope.currentitems = $scope.items.slice(start,end);

  $scope.$watch('currentpage', function() {
    start = ($scope.currentpage - 1) * $scope.itemsperpage;
    end = start + $scope.itemsperpage;
    $scope.currentitems = $scope.items.slice(start,end);
  },true);
});

関連記事の目次

Bootstrap

Angular-ui bootstrap

ng-bootstrap（Angular2、Angular4）

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル