ng-pagination test

learning angularjs

by Anov Siradj

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<h1>ng-Test</h1>
<small>angularJS stable version 1.2.19</small>
<div ng-controller="avwebController">
    <hr/>
    <div ng-repeat="c in contents | offsetAt:pagin.offset | limitTo:pagin.limit" class="inline-block">
        ID: {{c.id}}<br/>
        NAME: {{c.name}}<br/>
        MONEY: {{c.money}}
    </div>
    <hr/>
    <ul id="content-pagin">
        <li ng-repeat="p in pagin.numberPage"><button ng-click="pagin.changePage(p)">{{p}}</button></li>
    </ul>
    <hr/>
    <pre ng-repeat="paginvar in pagin">{{paginvar}}</pre>
</div>

CSS

#content-pagin {list-style:none;margin:0px;padding:0px;}
#content-pagin li {display:inline-block;margin:0px 2px;padding:0px;}
.inline-block {
    display: inline-block;
    width: 150px;
    height: 100px;
    background-color: #eee;
    margin: 0px;
    margin-right: 10px;
    margin-top: 10px;
    border-right: 1px solid red;
}

JavaScript

angular.module("avwebApp", []).controller("avwebController", function($scope) {
    
    $scope.contents = [
        {"id":2,"name":"Anov A","money":"1000.000"},{"id":4,"name":"Anov B","money":"10.000"},
        {"id":5,"name":"Anov C","money":"1.900"},{"id":7,"name":"Anov D","money":"1.000"},
        {"id":9,"name":"Anov E","money":"2.500"},{"id":10,"name":"Anov F","money":"500"},
        {"id":15,"name":"Anov G","money":"10"},{"id":17,"name":"Anov H","money":"550"},
        {"id":20,"name":"Anov I","money":"900"},{"id":21,"name":"Anov J","money":"400"},
        {"id":22,"name":"Anov K","money":"960"},{"id":23,"name":"Anov L","money":"660"},
        {"id":25,"name":"Anov M","money":"100"},{"id":29,"name":"Anov N","money":"230"},
        {"id":32,"name":"Anov O","money":"2.310"},{"id":33,"name":"Anov P","money":"4.656"},
        {"id":34,"name":"Anov Q","money":"944"},{"id":39,"name":"Anov R","money":"5.350"},
        {"id":40,"name":"Anov S","money":"55.623"},{"id":41,"name":"Anov T","money":"2.222"},
        {"id":42,"name":"Anov U","money":"6.222"},{"id":43,"name":"Anov V","money":"2.233"},
        {"id":44,"name":"Anov W","money":"2.212"},{"id":45,"name":"Anov X","money":"2.922"},
        {"id":46,"name":"Anov Y","money":"8.222"},{"id":49,"name":"Anov Z","money":"6.522"}
    ];
    
    $scope.pagin = {};
    $scope.pagin.offset = 0;
    $scope.pagin.limit = 5;
    
    $scope.pagin.totalContent = $scope.contents.length;
    $scope.pagin.totalPage = Math.ceil($scope.pagin.totalContent/$scope.pagin.limit);
    $scope.pagin.numberPage = [];
    
    for(n = 1; n <= $scope.pagin.totalPage; n++) {
        $scope.pagin.numberPage.push(n);
    }
    
    $scope.pagin.changePage = function(num) {
        $scope.pagin.offset = (num-1) * $scope.pagin.limit;
    }
    
}).filter("offsetAt", function() {
    return function(input, start) {
        start = +start;
        return input.slice(start);
    }
});