Long List with Filter

by OverZealous

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="myController">
        <div>Selected Items: {{ getSelected() }}</div>
        <hr/>
        <input ng-model="searchFilter" type="text" />
        <ul>
            <li ng-repeat="value in items | filter:searchFilter | startFrom:currentPage*pageSize:pageSize | limitTo:pageSize">
                <label>
                    <input type="checkbox" ng-model="selectedData[value]" />{{value}}</label>
            </li>
        </ul>
        <div>
            <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">Previous</button> {{ currentPage+1 }}/{{ numberOfPages() }}
            <button ng-disabled="currentPage >= items.length/pageSize - 1" ng-click="currentPage=currentPage+1">Next</button>
        </div>
    </div>
</div>

JavaScript

var app = angular.module("myApp", []);

app.controller("myController", ["$scope", function ($scope) {
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz.-_+";
    $scope.items = [];
    for (var i = 0; i < 1100; i++) {
        var item = "";
        for (var c = 0; c < 10; c++) {
            item += possible.charAt(Math.floor(Math.random() * possible.length));
        }
        item = item + " (" + i + ")";
        $scope.items.push(item);
    }

    $scope.currentPage = 0;
    $scope.pageSize = 20;
    $scope.numberOfPages = function () {
        return Math.ceil($scope.items.length / $scope.pageSize);
    }

    $scope.selectedData = {};
    $scope.getSelected = function () {
        var list = [];
        for (var val in $scope.selectedData) {
            list.push(val);
        }
        return list.join(", ");
    };
}]);

app.filter('startFrom', function () {
    return function (input, start, pageSize) {
        start = +start; //parse to int
        pageSize = +pageSize;
        while (start > input.length) {
            start -= pageSize;
        }
        if (start < 0) {
            start = 0;
        }
        return input.slice(start);
    };
});