{"id":1137,"date":"2015-08-05T04:34:22","date_gmt":"2015-08-05T04:34:22","guid":{"rendered":"http:\/\/www.honobono-life.info\/wpeng\/?p=1137"},"modified":"2015-08-05T04:34:22","modified_gmt":"2015-08-05T04:34:22","slug":"microposts-pagination-with-angularjs","status":"publish","type":"post","link":"http:\/\/www.honobono-life.info\/wpeng\/microposts-pagination-with-angularjs\/","title":{"rendered":"Ruby on Rails Tutorial microposts pagination with AngularJS"},"content":{"rendered":"<p><strong>1)AngularJS template view<\/strong><\/p>\r\n\r\n<p>$ vi app\/assets\/templates\/users\/show.html.erb<\/p>\r\n\r\n<div ng-non-bindable><pre class=\"prettyprint\">\r\n&lt;div ng-controller=&quot;UsersShowCtrl&quot; class=&quot;container&quot;&gt;\r\n.........\r\n    &lt;div class=&quot;col-xs-6 col-sm-8&quot;&gt;\r\n      &lt;h3&gt;Microposts({{user_info.microposts.length}})&lt;\/h3&gt;\r\n      &lt;ol class=&quot;microposts&quot;&gt;\r\n        &lt;li ng-repeat=&quot;mp in currentitems&quot;&gt;\r\n          &lt;div&gt;{{mp.content}}&lt;\/div&gt;\r\n          &lt;small class=&quot;text-muted&quot;&gt;Posted {{mp.created_at | date:&#39;medium&#39;}}&lt;\/small&gt;\r\n        &lt;\/li&gt;\r\n      &lt;\/ol&gt;\r\n      &lt;pagination total-items=&quot;totalitems&quot;\r\n                  ng-model=&quot;currentpage&quot;\r\n                  max-size=&quot;maxsize&quot;\r\n                  items-per-page=&quot;itemsperpage&quot;\r\n                  class=&quot;pagination-sm&quot;\r\n                  previous-text=&quot;Previous&quot;\r\n                  next-text=&quot;Next&quot;\r\n                  first-text=&quot;First&quot;\r\n                  last-text=&quot;Last&quot;\r\n                  boundary-links=&quot;true&quot;&gt;\r\n      &lt;\/pagination&gt;\r\n    &lt;\/div&gt;<\/pre><\/div>\r\n\r\n<p><strong>2)AngularJS controller<\/strong><\/p>\r\n\r\n<p>$ vi app\/assets\/javascripts\/mymodule.js.erb<\/p>\r\n\r\n<pre class=\"prettyprint\">\r\nmyModule.controller(&quot;UsersShowCtrl&quot;, function($scope, $routeParams, userResource, flashService, $filter) {\r\n  $scope.maxsize = 5;\r\n  $scope.itemsperpage = 3;\r\n  $scope.currentpage = 1;\r\n  var microposts = [];\r\n  var start = 0;\r\n  var end = start + $scope.itemsperpage;\r\n  userResource.show({ id: $routeParams.id }, function(response) {\r\n    $scope.user_info = response;\r\n    $scope.totalitems = $scope.user_info.microposts.length;\r\n    microposts = $filter(&#39;orderBy&#39;)($scope.user_info.microposts,&#39;created_at&#39;,true);\r\n    $scope.currentitems = microposts.slice(start,end);\r\n\r\n    $scope.$watch(&#39;currentpage&#39;, function() {\r\n      start = ($scope.currentpage - 1) * $scope.itemsperpage;\r\n      end = start + $scope.itemsperpage;\r\n      $scope.currentitems = microposts.slice(start,end);\r\n    },true);\r\n  });\r\n<\/pre>","protected":false},"excerpt":{"rendered":"<p>1)AngularJS template view $ vi app\/assets\/templates\/users\/show.html.erb &lt;div ng-controller=&quot;UsersShowCtrl&quot; class=&quot;container&quot;&gt; &#8230;&#8230;&#8230; &lt;div class=&quot;col-xs-6 col-sm-8&quot;&gt; &lt;h3&gt;Microposts({{user_info.microposts.length}})&lt;\/h3&gt; &lt;ol class=&quot;microposts&quot;&gt; &lt;li ng-repeat=&quot;mp in currentitems&quot;&gt; &lt;div&gt;{{mp.content}}&lt;\/div&gt; &lt;small class=&quot;text-muted&quot;&gt;Posted {{mp.created_at | date:&#39;medium&#39;}}&lt;\/small&gt; &lt;\/li&gt; &lt;\/ol&gt; &lt;pagination total-items=&quot;totalitems&quot; ng-model=&quot;currentpage&quot; max-size=&quot;maxsize&quot; items-per-page=&quot;itemsperpage&quot; class=&quot;pagination-sm&quot; previous-text=&quot;Previous&quot; next-text=&quot;Next&quot; first-text=&quot;First&quot; last-text=&quot;Last&quot; boundary-links=&quot;true&quot;&gt; &lt;\/pagination&gt; &lt;\/div&gt; 2)AngularJS controller $ vi app\/assets\/javascripts\/mymodule.js.erb myModule.controller(&quot;UsersShowCtrl&quot;, function($scope, $routeParams, userResource, flashService, $filter) { $scope.maxsize = [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[137],"tags":[35,178,172],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1137"}],"collection":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/comments?post=1137"}],"version-history":[{"count":1,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1137\/revisions"}],"predecessor-version":[{"id":1138,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/posts\/1137\/revisions\/1138"}],"wp:attachment":[{"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/media?parent=1137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/categories?post=1137"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.honobono-life.info\/wpeng\/wp-json\/wp\/v2\/tags?post=1137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}