current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I am using angular and trying to create a pagination feature.

I have something like

Angular controller

appModule.controller('testCtrl', ['$scope', function ($scope) {
   $scope.numbers = 7;
}])

html:

 <button ng-repeat=' not sure what to do here'>{{number.days}}</button>
//display more buttons...

The button texts will be something like 1, 2, 3,4… depends on the total page we have from the data.

I am not sure how to accomplish this. can anyone help me about it?

Thanks.

share|improve this question
add comment

3 Answers

up vote 1 down vote

ng-repeat only works with collections, so you would have to define $scope.numbers=[0,1,2,3,4,5,6,7] and then do: <button ng-repeat='number in numbers'>{{number}}</button>

or, you could use a function that returns an array <button ng-repeat='i in buildNumbers( number )'></button> where number is defined on the scope like $scope.number = 7 and buildNumber converts the number to an array.

share|improve this answer
add comment
up vote 1 down vote

I would suggest using ng-grid - an angular high-performant data grid for rendering rows and really shines when you have lots of rows, it has a lot of nice features like filtering, sorting and of-course pagination.

Example:

html:

 <body ng-controller="MyCtrl">
    <div class="gridStyle" ng-grid="gridOptions"></div>
</body>

js:

app.controller('MyCtrl', function($scope, $http) {
    $scope.filterOptions = {
        filterText: "",
        useExternalFilter: true
    }; 
    $scope.totalServerItems = 0;
    $scope.pagingOptions = {
        pageSizes: [250, 500, 1000],
        pageSize: 250,
        currentPage: 1
    };  
    $scope.setPagingData = function(data, page, pageSize){  
        var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
        $scope.myData = pagedData;
        $scope.totalServerItems = data.length;
        if (!$scope.$$phase) {
            $scope.$apply();
        }
    };
    $scope.getPagedDataAsync = function (pageSize, page, searchText) {
        setTimeout(function () {
            var data;
            if (searchText) {
                var ft = searchText.toLowerCase();
                $http.get('jsonFiles/largeLoad.json').success(function (largeLoad) {        
                    data = largeLoad.filter(function(item) {
                        return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                    });
                    $scope.setPagingData(data,page,pageSize);
                });            
            } else {
                $http.get('jsonFiles/largeLoad.json').success(function (largeLoad) {
                    $scope.setPagingData(largeLoad,page,pageSize);
                });
            }
        }, 100);
    };

    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);

    $scope.$watch('pagingOptions', function (newVal, oldVal) {
        if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
          $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
        }
    }, true);
    $scope.$watch('filterOptions', function (newVal, oldVal) {
        if (newVal !== oldVal) {
          $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
        }
    }, true);

    $scope.gridOptions = {
        data: 'myData',
        enablePaging: true,
        showFooter: true,
        totalServerItems: 'totalServerItems',
        pagingOptions: $scope.pagingOptions,
        filterOptions: $scope.filterOptions
    };
});

Live example: http://plnkr.co/edit/luDhRf?p=preview

share|improve this answer
add comment
up vote 1 down vote

There are the Tutorials which will show you how to use AngularJS and the ng-repeat. Then, if you combine Bootstrap pagination you can achieve what you want quite easily

In your Controller:

App.controller('PageCtrl', function ($scope) {
    $scope.pages = {1, 2, 3, 4, 5, 6, 7};
}

In the HTML:

<ul class="pagination" ng-repeat="page in pages">
    <li><a href="#/Page{{page}}">{{page}}</a></li>
</ul>
share|improve this answer
    
I like the solution but I need to customize my page button. I don't think I can do that with bootstrap. +1 though –  Links 20 hours ago
    
@Links What do you mean by customize the button? You can change the HTML code in the <li>, <a>, etc to be buttons if needed. You could also use a function to return information instead of this simple repeat. –  Steven Scott 1 hour ago
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.