Ruby on Rails Tutorial　ユーザーのマイクロポストをページ化して表示

「Ruby on Rails Tutorial」のサンプルアプリをAngularJSとBootstrap3を使う形にして作成します。前回、AngularJSのビューでユーザープロファイルページにそのユーザーのマイクロポストを表示しました。今回はそのマイクロポストをページ化して表示するように修整しました。

１）AngularJSビューを修整
　
$ vi app/assets/templates/users/show.html.erb

<div ng-controller="UsersShowCtrl" class="container">
　　　：
    <div class="col-xs-6 col-sm-8">
      <h3>Microposts({\{user_info.microposts.length}})</h3>
      <ol class="microposts">
        <li ng-repeat="mp in currentitems">
          <div>{\{mp.content}}</div>
          <small class="text-muted">Posted {\{mp.created_at | date:'medium'}}</small>
        </li>
      </ol>
      <pagination total-items="totalitems"
                  ng-model="currentpage"
                  max-size="maxsize"
                  items-per-page="itemsperpage"
                  class="pagination-sm"
                  previous-text="Previous"
                  next-text="Next"
                  first-text="First"
                  last-text="Last"
                  boundary-links="true">
      </pagination>
    </div>

　
２）AngularJSコントローラを修整
　
①AngularJSのフィルターを使ってマイクロポストを降順に並び替え
　
myModule.controller(“UsersShowCtrl”, function($scope,・・, $filter) {
　　：
microposts = $filter(‘orderBy’)($scope.user_info.microposts,’created_at’,true);
　
②ユーザー一覧と同様にページ化
　
$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("UsersShowCtrl", function($scope, $routeParams, userResource, flashService, $filter) {
  $scope.maxsize = 5;
  $scope.itemsperpage = 3;
  $scope.currentpage = 1;
  var microposts = [];
  var start = 0;
  var end = start + $scope.itemsperpage;
  userResource.show({ id: $routeParams.id }, function(response) {
    $scope.user_info = response;
    $scope.totalitems = $scope.user_info.microposts.length;
    microposts = $filter('orderBy')($scope.user_info.microposts,'created_at',true);
    $scope.currentitems = microposts.slice(start,end);

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