JSFiddle - React, Tailwind, and code Playground

by Laxmikant Dange

HTML

<script src="https://code.angularjs.org/1.2.16/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
    <div style="border:1px solid #F00">
        <div ng-init="limit=10;start=0;">
            <div style="border:1px solid #F00; display:inline-block;width:500px">
                Pages:
                <ul class="pagination">
                    <li ng-repeat="count in values.length|range:limit" >
                        <label ng-click="$parent.start=count">
                            <input type="radio" name="pages" ng-checked="$index==0"/>
                            <span>{{count+1}}</span>
                        </label>
                    </li>
                </ul>
            </div>
            <div style="border:1px solid #F00; display:inline-block;">
                Results Per page
                <ul class="pagination">
                    <li ng-repeat="lim in [10,20,30,40]" >
                        <label ng-click="$parent.limit=lim;$parent.start=0">
                            <input type="radio" name="records" ng-checked="$index==0"/>
                            <span>{{lim}}</span>
                        </label>
                    </li>
                </ul>
            </div>
            <ul>
                <li ng-repeat="val in values|slice:limit:start*limit">{{$index+1}} {{ val}}</li>
            </ul>
        </div>
    </div>
</div>

CSS

li {
    cursor:pointer;
}
li:hover {
    background-color:#F00;
    color:#FFF;
}
.pagination li {
    display:inline-block;

}
.pagination li label span{
    padding:5px;
    display:inline-block;
    cursor:pointer;
}
.pagination li label input{
    display:none;
}
.pagination li label input:checked+span{
        background-color:#F0F;
}

JavaScript

angular.module('myApp', [])
    .controller("myController", function ($scope) {
    $scope.values = (function () {
        var arr = [];
        for (var a = 0; a < 1000; a++) {
            var text = "";
            var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

            for (var i = 0; i < 5; i++)
            text += possible.charAt(Math.floor(Math.random() * possible.length));
            arr.push(text)
        }
        return arr;
    })();
}).filter('range', function () {
    return function (val, limit) {
        var arr = [];
        val = val / limit;
        for (var i = 0; i < val; i++) {
            arr.push(i);
        }
        return arr;
    }
}).filter('slice', function () {
    return function (arr, end, start) {
        start = start || 0;
        return (arr || []).slice(start, start + end);
    };
});