JSFiddle - React, Tailwind, and code Playground

by doublekid

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div ng-controller="pageCtrl">
    <input type="text" ng-model="search.name" ng-change="filter()" placeholder="Name"/><br/>
    <select multiple ng-model="search.language" ng-change="filter()"/>
    <option>English</option>
    <option>Spanish</option>
    <option>German</option>
    </select><br/>
    <br/>
    <ul>
        <li ng-repeat="data in filtered = list | filter:search.name | customFilter:search.language | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">{{data.name}} - {{data.language}}</li>
    </ul>
    <pagination data-boundary-links="true" data-num-pages="noOfPages" data-current-page="currentPage" max-size="maxSize" class="pagination-small" data-previous-text="&laquo;" data-next-text="&raquo;"></pagination>
</div>

JavaScript

var app = angular.module('myApp', ['ui.bootstrap']);

app.filter('startFrom', function() {
    return function(input, start) {
        if(input) {
            start = +start; //parse to int
            return input.slice(start);
        }
        return [];
    }
});

app.filter("customFilter", function() {
    return function(input, search) {
        if(search && search != undefined) {
            var _toRet = new Array();
            for(var i in search) {
                for(var k in input) {
                    if(search.indexOf(input[k].language) != -1 && _toRet.indexOf(input[k]) == -1) {
                        _toRet.push(input[k]);
                    }
                }
            }
            return _toRet;
        } else {
            return input;
        }
    };
});

function pageCtrl($scope, $timeout) {
    $scope.list = [
        {"name":"name 1", "language": "English"},
        {"name":"name 2", "language": "German"},
        {"name":"name 3", "language": "Spanish"},
        {"name":"name 4", "language": "Spanish"},
        {"name":"name 5", "language": "Spanish"},
        {"name":"name 6", "language": "English"},
        {"name":"name 7", "language": "English"},
        {"name":"name 8", "language": "English"},
        {"name":"name 9", "language": "German"},
        {"name":"name 10", "language": "German"},
        {"name":"name 11", "language": "English"},
        {"name":"name 12", "language": "English"},
        {"name":"name 13", "language": "Spanish"},
        {"name":"name 14", "language": "English"},
        {"name":"name 15", "language": "German"},
        {"name":"name 16", "language": "Spanish"},
        {"name":"name 17", "language": "German"},
        {"name":"name 18", "language": "German"},
        {"name":"name 19", "language": "German"},
        {"name":"name 20", "language": "Spanish"},
        {"name":"Peter", "language": "English"},
        {"name":"Frank", "language": "English"},
        {"name":"Joe", "language":...