JSFiddle - React, Tailwind, and code Playground

by vusan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
	<form class="form-horizontal" role="form" id="form" method="post" name = "userForm"
		   novalidate ng-submit = "chkLogin($event)"> 		
<div class="form">
				<div class="input_label">Username :</div>
				<div class="input_value">
					<input type="email" name="username" id="username" ng-model="username" class="form-control" placeholder="User Name" ng-blur="blur('username')"     ng-required="true">
					<div  id="usernameError" class="input_error">{{usernameError}}</div>
				</div>
				
				
				<div class="clear_both"></div>
			</div>
			<div class="form">
				<div class="input_label">Password :</div>
				<div class="input_value">
					<input type="password" name="password" id="password"  ng-model="password" class="form-control"  placeholder="Password"   ng-blur="blur('password')" ng-required="true" >
					<div class="input_error" id="passwordError">{{passwordError}}</div>
					<div id="error" class="error">
						
					</div>
				</div>
				
				<div class="clear_both"></div>
			</div>	
                        <button class="btn green" id="btn" name="btn">Login</button>
                        </form>

JavaScript

var app = angular.module("MyApp", []);

app.factory("Item", function() {

  var items = [];
  for (var i=0; i<50; i++) {
    items.push({ id: i, name: "name "+ i, description: "description " + i });
  }

  return {
    get: function(offset, limit) {
      return items.slice(offset, offset+limit);
    },
    total: function() {
      return items.length;
    }
  };
});

app.controller("PaginationCtrl", function($scope, Item) {

  $scope.itemsPerPage = 5;
  $scope.currentPage = 0;

  $scope.range = function() {
    var rangeSize = 5;
    var ret = [];
    var start;

    start = $scope.currentPage;
    if ( start > $scope.pageCount()-rangeSize ) {
      start = $scope.pageCount()-rangeSize;
    }

    for (var i=start; i<start+rangeSize; i++) {
      ret.push(i);
    }
    return ret;
  };


  $scope.prevPage = function() {
    if ($scope.currentPage > 0) {
      $scope.currentPage--;
    }
  };

  $scope.prevPageDisabled = function() {
    return $scope.currentPage === 0 ? "disabled" : "";
  };

  $scope.nextPage = function() {
    if ($scope.currentPage < $scope.pageCount() - 1) {
      $scope.currentPage++;
    }
  };

  $scope.nextPageDisabled = function() {
    return $scope.currentPage === $scope.pageCount() - 1 ? "disabled" : "";
  };

  $scope.pageCount = function() {
    return Math.ceil($scope.total/$scope.itemsPerPage);
  };

  $scope.setPage = function(n) {
    if (n > 0 && n < $scope.pageCount()) {
      $scope.currentPage = n;
    }
  };

  $scope.$watch("currentPage", function(newValue, oldValue) {
    $scope.pagedItems = Item.get(newValue*$scope.itemsPerPage, $scope.itemsPerPage);
    $scope.total = Item.total();
  });

});