JSFiddle - React, Tailwind, and code Playground

by Anov Siradj

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>ng-Test</h1>
            <small>angularJS stable version 1.2.19</small>
        </div>
    </div>
    
    <div class="row" ng-controller="avwebController">
        <div class="col-md-3" ng-repeat="c in items | limitTo:pagin.newLimit">
            
            <div class="panel panel-primary">
                <div class="panel-heading">{{c.name}}</div>
                <div class="panel-body">
                    ID: {{c.id}}<br/>
                    MONEY: {{c.money}}
                </div>
            </div>
            
        </div>
        <div class="col-md-12">
            <button ng-hide="pagin.newLimit > pagin.totalItem" ng-click="loadMore()" class="btn btn-primary btn-block">
                Tambah Meneh...,
            </button>
            <div ng-hide="pagin.newLimit < pagin.totalItem" class="alert alert-warning alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                Wes Entek
            </div>
            
        </div>
    </div>
</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.items = [
        {"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.limit = 8;
    $scope.pagin.newLimit = $scope.pagin.limit;
    $scope.pagin.totalItem = $scope.items.length;
    
    $scope.pagin.status = "null";
    
    $scope.loadMore = function() {
        $scope.pagin.newLimit = $scope.pagin.newLimit+$scope.pagin.limit;
    }
    
});