pagination

new_gist_file

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

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

function pageCtrl($scope) {

  $scope.isCollapsed = true;
   
  $scope.list = [
    {
        "title": "Alocasia - Алоказия - Нэгүр.",
        "description": "Нэгүр нь ховор ургамал бөгөөд ном хэвлэлд тэр болгон бичигдээгүй.<br/>" +
        " Түүний том өндөр шулуухан навчны шилбэ 70см урт, жимс нь ганц үртэй, бамбай хэлбэрийн навчныхаа шүдлэг зах руу төмрийн хөх өнгийн туяатайгаараа хүмүүсийн анхаарлыг маш их татдаг.",
        "condition": "дулаанд дуртай, зундаа 20С-ээс дээшгүй, өвөлдөө 18С-ээс доошгүй.",
        "light": "өвөлдөө хурц, зундаа бүдэг гэрэл тохиромжтой.",
        "water": "хөрсийг хэзээ ч хатааж болохгүй, өвөлдөө маш болгоомжтой услах ёстой.",
        "humidity": "дандаа шүршиж байх шаардлагатай.",
        "transplant": "жил болгоны хавар.",
        "plant_culture": "үндсийг хувааж суулгана.",
    }
]

console.log( "JSON Data: " + $scope.list[3].title);
    $scope.currentPage = 1; //current page
    $scope.maxSize = 5; //pagination max size
    $scope.entryLimit = 30; //max rows for data table

    /* init pagination with $scope.list */
    $scope.noOfPages = Math.ceil($scope.list.length/$scope.entryLimit);
    $scope.setPage = function(pageNo) {
        $scope.currentPage = pageNo;
    };
    
    $scope.filter = function() {
        window.setTimeout(function() { //wait for 'filtered' to be changed
            /* change pagination with $scope.filtered */
            $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.entryLimit);
        }, 10);
    };
} 


<div ng-controller="pageCtrl">
                        <input type="text" ng-model="search" ng-change="filter()" placeholder="Search"><br>
                        <br>
                        <ul>
                            <li ng-repeat="data in filtered = (list | filter:search) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
                                <a ng-click="isCollapsed = !isCollapsed">{{data.title}}</a>
                                <div collapse="isCollapsed">
                                    <div class="well well-small">
                                        <p>
                                            <strong>Description:</strong>
                                        </p>
                                        <p>
                                            <strong>Condition:</strong> {{data.condition}}
                                        </p>
                                        <p>
                                            <strong>Light:</strong> {{data.light}}
                                        </p>
                                        <p>
                                            <strong>Water:</strong> {{data.water}}
                                        </p>
                                        <p>
                                            <strong>Humidity:</strong> {{data.humidity}}
                                        </p>
                                        <p>
                                            <strong>Transplant:</strong> {{data.transplant}}
                                        </p>
                                        <p>
                                            <strong>Plant Culture:</strong> {{data.plant_culture}}
                                        </p>
                                        <p>
                                            <strong>Pertilizer:</strong> {{data.pertilizer}}
                                        </p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>