JSFiddle - React, Tailwind, and code Playground

by Miguel Sirna

HTML

<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-resource.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="col-md-12" ng-controller="pageCtrl">
    <input type="text" ng-model="search" class="form-control" placeholder="Search" />
    <br/>
    <ul>
        <li ng-repeat="data in list | filter : paginate">{{data.name}}</li>
    </ul>
    <pagination total-items="totalItems" ng-model="currentPage" max-size="5" boundary-links="true" items-per-page="numPerPage"></pagination>
</div>

JavaScript

angular.module('myApp', ['ui.bootstrap', 'ngResource'])
    .controller('pageCtrl', ['$scope', function ($scope) {
    $scope.list = [{
        name: 'name1',
        genre: 'famale'
    }, {
        name: 'name2',
        genre: 'male'
    }, {
        name: 'name3',
        genre: 'famale'
    }, {
        name: 'name4',
        genre: 'male'
    }, {
        name: 'name5',
        genre: 'famale'
    }, {
        name: 'name6',
        genre: 'male'
    }, {
        name: 'name7',
        genre: 'famale'
    }, {
        name: 'name8',
        genre: 'famale'
    }, {
        name: 'name9',
        genre: 'male'
    }, {
        name: 'name10',
        genre: 'male'
    }, {
        name: 'name11',
        genre: 'famale'
    }, {
        name: 'name12',
        genre: 'male'
    }, {
        name: 'name13',
        genre: 'famale'
    }, {
        name: 'name14',
        genre: 'male'
    }, {
        name: 'name15',
        genre: 'famale'
    }, {
        name: 'name16',
        genre: 'famale'
    }, {
        name: 'name17',
        genre: 'male'
    }, {
        name: 'name18',
        genre: 'famale'
    }, {
        name: 'name19',
        genre: 'male'
    }, {
        name: 'name20',
        genre: 'famale'
    }, {
        name: 'Peter',
        genre: 'male'
    }, {
        name: 'Frank',
        genre: 'male'
    }, {
        name: 'Joe',
        genre: 'male'
    }, {
        name: 'Ralph',
        genre: 'male'
    }, {
        name: 'Gina',
        genre: 'famale'
    }, {
        name: 'Sam',
        genre: 'male'
    }, {
        name: 'Britney',
        genre: 'famale'
    }];

    $scope.totalItems = $scope.list.length;
    $scope.currentPage = 1;
    $scope.numPerPage = 5;

    $scope.paginate = function (value) {
        var begin, end, index;
        begin = ($scope.currentPage - 1) * $scope.numPerPage;
        end = begin + $scope.numPerPage;
        index = $scope.list.indexOf(value);
        return (begin <= index && index < end);
  ...