CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
François Romain
François Romain

Reputation: 14393

ui-bootsrap pagination: first page button is not disabled when page loads

I am displaying a list of elements inside a ng-include. The list of elements comes from the server using $resource query service.
The list is paginated with the ui-bootstrap pagination directive. the server send the pagination informations inside the Json header (properties are named X-MyApp-…) and are intercepted by the query callback function.

here is the html : 

<table ng-include src="'partials/tplList.html'" ng-init="listInit = {'type': collec.type, 'offset': 1}" ng-controller="ListCtrl" >
</table>

the tplList.html : 

<tbody ng-init="loadList(listInit)"><tr ng-repeat="elm in list">
     <td>{{elm.prop1}}</td><td>{{elm.prop2}}</td><td>{{elm.prop3}}</td>
</tr></tbody>
<tfoot><tr><td colspan="4">
<span ng-show="pageCount>1">
    <pagination num-pages="pageCount" current-page="currentPage" max-size="10" on-select-page="loadList(collect(listInit, {offset: page}))">
    </pagination>
</span>
</td></tr></tfoot>

and the controller: 

controller('ListCtrl', ['$scope', 'List', function($scope, List) {
// collect: concatenate the objects before to send it to loadList()
    $scope.collect = function (a,b){
        var c = {};
        for (var att in a) { c[att] = a[att]; }
        for (var att in b) { c[att] = b[att]; }
        return c;
    }

    $scope.loadList = function (param) {
        $scope.list = List.query(p, function(list, response) {
            $scope.currentPage = response("X-MyApp-currentPage");
            $scope.pageCount = response("X-MyApp-pagesCount");
    console.log($scope.currentPage); // returns 1 when the page loads. 
        }); 
    }
}])

and the service : 

factory('List', function($resource){
    return $resource('url/to/the/json/:type', {type:'@type'});
})

everything is working fine except one thing : when the page loads, the first page button ("1") inside the pagination component is not disabled like it should (and the "previous" and "first" buttons are not either). It's not disabled until i click on another page number (which is disabled correctly when selected) and then click back on the first page button.

any idea ?

Upvotes: 0

Views: 2780

Answers (2)

Alexandru R
Alexandru R

Reputation: 8833

This happens because ng-include creates a new scope and the model is not modified in your $parent scope.

Try the following code or create a controller that communicates with the parent one.

<pagination num-pages="pageCount" current-page="$parent.currentPage" max-size="10" on-select-page="loadList(collect(listInit, {offset: page}))">
    </pagination>

Upvotes: 2

Fran&#231;ois Romain
Fran&#231;ois Romain

Reputation: 14393

i found a way to make it work:

removed this line from the controller : 

 $scope.currentPage = response("X-MyApp-currentPage");

and added this one : 

$scope.currentPage = 1;

which gives : 

controller('ListCtrl', ['$scope', 'List', function($scope, List) {
// collect: concatenate the objects before to send it to loadList()
$scope.collect = function (a,b){
    var c = {};
    for (var att in a) { c[att] = a[att]; }
    for (var att in b) { c[att] = b[att]; }
    return c;
}

$scope.currentPage = 1;

$scope.loadList = function (param) {
    $scope.list = List.query(p, function(list, response) {
        $scope.pageCount = response("X-MyApp-pagesCount");
    }); 
}
}])

apparently the pagination component doesn't need the X-MyApp-currentPage information from the server (and i'm not sure to understand why).

Upvotes: 1

Related Questions