D3 Examples - Angular Pagination and Search

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- bower:css -->
    <link rel="stylesheet" href="/bower_components/foundation/css/foundation.css" />
    <!--endbower -->
</head>
<body ng-app="testApp">
​
<div id="content" ng-controller="Ctrl">
​
<div class="large-8 columns centered">
​
<div class="row">
    <input type="search" ng-model="search">
    <div class="control-group">
      <label class="control-label" for="rows-per-page">Rows per page</label>
      <div class="controls">
        <select id="rows-per-page" ng-model="rowsPerPage" class="input-xlarge">
          <option>5</option>
          <option>10</option>
          <option>20</option>
          <option>50</option>
        </select>
      </div>
    </div>
</div>
​
<div class="row">
    <paginator></paginator>
</div>
​
<ul id="cards" class="row">
​
    <li ng-repeat="card in filteredCards | paginate:rowsPerPage">
​
        {{ card.name }} [{{ card.id }}]
​
        <div>Issuer: {{ card.issuer_id }}</div>
​
        <span>Starting on {{ card.start_time }}</span>
        <span>Ending on {{ card.end_time }}</span>
​
        <button ng-click="remove($index)">Event</button>
        <button ng-click="something()">Event</button>
​
    </li>
</ul>
​
​
​
</div>
​
<!-- bower:js -->
<script src="/bower_components/modernizr/modernizr.js"></script>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/fastclick/lib/fastclick.js"></script>
<script src="/bower_components/jquery.cookie/jquery.cookie.js"></script>
<script src="/bower_components/jquery-placeholder/jquery.placeholder.js"></script>
<script src="/bower_components/foundation/js/foundation.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-resource/angular-resource.js"></script>
<script src="/bower_components/ngInfiniteScroll/ng-infinite-scroll.js"></script>
<!-- endbower -->
​
<script>
​
    angular.module('pagination', [])
​
    .filter('paginate', function(Paginator) {
        return function(input, rowsPerPage) {
            if (!input) {
                return input;
            }
​
            if (rowsPerPage) {
                Paginator.rowsPerPage = rowsPerPage;
            }
​
            Paginator.itemCount = input.length;
​
            return input.slice(parseInt(Paginator.page * Paginator.rowsPerPage), parseInt((Paginator.page + 1) * Paginator.rowsPerPage + 1) - 1);
        }
    })
​
    .filter('forLoop', function() {
        return function(input, start, end) {
            input = new Array(end - start);
            for (var i = 0; start < end; start++, i++) {
                input[i] = start;
            }
​
            return input;
        }
    })
​
    .service('Paginator', function ($rootScope) {
        this.page = 0;
        this.rowsPerPage = 50;
        this.itemCount = 0;
        this.limitPerPage = 5;
​
        this.setPage = function (page) {
            if (page > this.pageCount()) {
                return;
            }
​
            this.page = page;
        };
​
        this.nextPage = function () {
            if (this.isLastPage()) {
                return;
            }
​
            this.page++;
        };
​
        this.perviousPage = function () {
            if (this.isFirstPage()) {
                return;
            }
​
            this.page--;
        };
​
        this.firstPage = function () {
            this.page = 0;
        };
​
        this.lastPage = function () {
            this.page = this.pageCount() - 1;
        };
​
        this.isFirstPage = function () {
            return this.page == 0;
        };
​
        this.isLastPage = function () {
            return this.page == this.pageCount() - 1;
        };
​
        this.pageCount = function () {
            return Math.ceil(parseInt(this.itemCount) / parseInt(this.rowsPerPage));
        };
​
        this.lowerLimit = function() {
            var pageCountLimitPerPageDiff = this.pageCount() - this.limitPerPage;
​
            if (pageCountLimitPerPageDiff < 0) {
                return 0;
            }
​
            if (this.page > pageCountLimitPerPageDiff + 1) {
                return pageCountLimitPerPageDiff;
            }
​
            var low = this.page - (Math.ceil(this.limitPerPage/2) - 1);
​
            return Math.max(low, 0);
        };
    })
​
    .directive('paginator', function factory() {
        return {
            restrict:'E',
            controller: function ($scope, Paginator) {
                $scope.paginator = Paginator;
                $scope.$watch('search', function(term) {
                    $scope.paginator.setPage(0);
                });
            },
            templateUrl: '/paginationTemplate.html'
        };
    });
​
    var module = angular.module('testApp', ['pagination']);
​
    module.controller('Ctrl', function ($scope, $http, filterFilter) {
​
        $scope.cards = [];
        $scope.filteredCards = [];
        $scope.rowsPerPage = 5;
​
        $http({method: 'GET', url: '/card'}).
            success(function(data, status, headers, config) {
                $scope.cards = data;
                $scope.filteredCards = data;
                $scope.cache = angular.copy($scope.cards);
            }).
            error(function(data, status, headers, config) {
                $scope.cards = 'FAIL';
            });
​
        $scope.$watch('search', function(term) {
            // Create $scope.filtered and then calculat $scope.noOfPages, no racing!
            $scope.filteredCards = filterFilter($scope.cards, term);
        });
​
        $scope.remove = function(index) {
            $scope.cards.splice(index, 1);
        }
​
    });
</script>
​
</body>
</html>
    