Web Programming examples

Google Maps,AngularJS

Archives

Ruby on Rails

Ruby on Rails Tutorial microposts feed pagination with AngularJS

1)AngularJS template view

$ vi app/assets/templates/static_pages/home.html.erb

<div ng-controller="HomeCtrl">
  <div ng-show="chkSignin().user.id > 0" class="row">
    <div class="col-sm-4">
.......
    </div>
    <div class="col-sm-8">
      <h3>Micropost Feed</h3>
      <ol class="microposts">
        <li ng-repeat="mp in currentitems">
...........
        </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>
  </div>

2)AngularJS controller

$ vi app/assets/javascripts/mymodule.js.erb

myModule.controller("HomeCtrl", function($scope, flashService, micropostsResource, sessionResource, $filter) {
....
  $scope.submit = function() {
    function success(response) {
      sessionResource.current_user({}, function(response1) {
        var current_user = response1;
        $scope.totalitems = current_user.feed.length;
        feed_items = $filter('orderBy')(current_user.feed,'created_at',true);
        $scope.currentitems = feed_items.slice(start,end);
        flashService.setUser(current_user);
      });
      flashService.push(msg);
      $scope.$emit("$routeChangeSuccess");
    }
    function failure(response) {
........
    }
    micropostsResource.create($scope.micropost, success, failure);
  };
.........
  var feed_items = [];
  $scope.maxsize = 5;
  $scope.itemsperpage = 8;
  $scope.currentpage = 1;
  var start = 0;
  var end = start + $scope.itemsperpage;
  sessionResource.current_user({}, function(response) {
    if (response.feed) {
      var tmp_feed = response.feed;
      $scope.totalitems = tmp_feed.length;
      feed_items = $filter('orderBy')(tmp_feed,'created_at',true);
      $scope.currentitems = feed_items.slice(start,end);
    }
  });
  $scope.$watch('currentpage', function() {
    start = ($scope.currentpage - 1) * $scope.itemsperpage;
    end = start + $scope.itemsperpage;
    $scope.currentitems = feed_items.slice(start,end);
  },true);

});
Ruby on Rails

Ruby on Rails Tutorial microposts pagination with AngularJS

1)AngularJS template view

$ 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>

2)AngularJS controller

$ 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);
  });
Ruby on Rails

Ruby on Rails Tutorial paginate the users with AngularJS

ref.
http://angular-ui.github.io/bootstrap/#/pagination
http://getbootstrap.com/components/#pagination

1)AngularJS template view

$ vi app/assets/templates/users/index.html.erb

<div ng-controller="UsersIndexCtrl">
  <h1 class="text-center">All users</h1>
  <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><br />
  <ul ng-repeat="user in currentitems" class="users">
    <li><img alt="{{user.name}}" src="https://secure.gravatar.com/avatar/{{hash(user.email)}}?s=52" />
      <a href="/users/{{user.id}}">{{user.name}}</a>
    </li>
  </ul>
  <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"
              rotate="false">
  </pagination>
</div>

2)AngularJS controller

myModule.controller("UsersIndexCtrl", function($scope, userResource, flashService, $location, sessionResource, $q) {
  $scope.maxsize = 5;
  $scope.itemsperpage = 3;
  $scope.currentpage = 1;
  var start = 0;
  var end = start + $scope.itemsperpage;

  var qgetUser = function(deferred) {
.........
  }
  var deferred = $q.defer();
  deferred.promise.then(function (result) {
    var user_info = result;
    if (user_info.user.id > 0) {
      userResource.index({}, function(response) {
        $scope.users = response;
        $scope.totalitems = $scope.users.length;
        $scope.currentitems = $scope.users.slice(start,end);

        $scope.$watch('currentpage', function() {
          start = ($scope.currentpage - 1) * $scope.itemsperpage;
          end = start + $scope.itemsperpage;
          $scope.currentitems = $scope.users.slice(start,end);
        },true);
      });
    } else {
      $location.path("/signin");
    }
  },function (reason) {
    console.log("qgetUser-Error");
  })
  qgetUser (deferred);

  $scope.hash = function(email) {
    return md5(email.toLowerCase());
  };
});