CODEWITHSUNDEEP
javascriptjsonangularjs
madhu kumar
madhu kumar

Reputation: 810

How to bind Json list item to pagination in angularJs?

I have large list of Json data and i arranged it in my page. Also i used paging for this. I am getting Json list in my page but the problem is, with the list generated. I have categories like(Animation, Comedy, MiniSeries, etc). When my page loads first time, listbox shows (All)- then everything is fine but when i select categories in the listbox, then the data is not displaying properly.

plnkr link pls wait for few seconds if json data is not loaded.

 // calculate page in place
        $scope.groupToPages = function () {
            $scope.pagedItems = [];

            for (var i = 0; i < $scope.filteredItems.length; i++) {
                if (i % $scope.pageSize === 0) {
                    $scope.pagedItems[Math.floor(i / $scope.pageSize)] = [ $scope.filteredItems[i] ];

                } else {
                    $scope.pagedItems[Math.floor(i / $scope.pageSize)].push($scope.filteredItems[i]);
                }
            }
        };

Upvotes: 0

Views: 287

Answers (1)

Robert M. Lefkowitz
Robert M. Lefkowitz

Reputation: 1495

The issue in this case is a confusion between the various selection methods.

If you look on page 6 when 'horror' is selected, you should see "Lost Girl" -- the horror movie.

Basically, the $scope.filteredItems is the list of items selected by the filter field. If you type "Lost" into that field while "horror" is the genre, it will seem to work. That is because, when nothing is typed into the "filter" field, you are searching all the items. Then, when you find an item on (say) page 6 -- it gets added to the $scope.pagedItems array as an item on page 6.

In order for this function to work, you need to modify the $scope.filteredItems list to only select elements that are in the selected genre and meet the filter criterion.

Upvotes: 1

Related Questions