ANGULARJS enables simple paging functionality

This post consists of: http://xinpure.com/angularjs-simple-paging-functionality/

Beginner AngularJS , try to write some small functions

The code logic is slightly rough, just to achieve a simple paging function, use to AngularJS taste fresh.

AngularJS Code (users.js)

var Users = angular.module(‘Users‘, []);Users.controller(‘UserList‘, function($scope, $http) {    $scope.start        = 0;    $scope.showLimit    = 10;    $scope.count        = 0;    /* Default Users List */    $http.get(‘welcome/get_users‘ + ‘/‘ + $scope.start + ‘/‘ + $scope.showLimit).success(function(data){        $scope.users = data;    });    /* Count Users */    $http.get(‘welcome/count_users‘).success(function(data){        $scope.count = data;    });    /* Pagination */    $scope.page = function (start) {        $scope.start = start < 0 ? 0 : start;        if (start >= $scope.count)   $scope.start = $scope.count - $scope.showLimit;        $http.get(‘welcome/get_users‘ + ‘/‘ + $scope.start + ‘/‘ + $scope.showLimit).success(function(data){            $scope.users = data;        });    }});

HTML Code

CSS Code (a little landscaping)

body {    background-color: #fff;    margin: 40px;    font: 13px/20px normal Helvetica, Arial, sans-serif;    color: #4F5155;}#user_list {    margin: 15px;}#container {    margin: 10px;    border: 1px solid #D0D0D0;    box-shadow: 0 0 8px #D0D0D0;}input {    width: 40px;    height: 19px;    padding: 3px;    color: #555;    border-radius: 3px;    border: 1px solid #ccc;}input.query {    width: 100px;}button {    padding: 5px;    background-color: #fff;    border: 1px solid #ccc;    border-radius: 3px;}table {    border-spacing: 0;    border-collapse: collapse;}td,th  {    border: 1px solid #ccc;    text-align: center;    padding: 5px;}

The main logic code is written dead, not flexible, slowly improve it.

ANGULARJS enables simple paging functionality