How to search a JSON with AngularJS?

Question

This is my working Pagination:

http://plnkr.co/edit/WmC6zjD5srtYHKopLm7m

Here is a summary of my code:

var app = angular.module('hCms', []);
app.controller('samplecontoller', function ($scope,  $http) {   
    $scope.showData = function(){   
        $scope.method = 'GET';
        $scope.url = 'homes.json';
        $scope.code = null;
        $scope.response = null;
        $scope.curPage = 0;
        $scope.pageSize = 3;

        $http({method: $scope.method,url: $scope.url}).
            success(function(data, status) {
                $scope.status = status;
                $scope.datalists = data;
            }).
            error(function(data, status) {
                $scope.datalists = data || "Request failed";
                $scope.status = status;
            });

        $scope.numberOfPages = function() {
            return Math.ceil($scope.datalists.length / $scope.pageSize);
        };

    }

});

angular.module('hCms').filter('pagination', function()
{
    return function(input, start)
    {
        start = +start;
        return input.slice(start);
    };
});

Code works with no issues. Now if you please type in the search field "Dis" which there is an entry for it under page 3. Search brings nothing. I need to run the search on the $scope.datalist at the controller(I think) not as a filter.

Can someone please put me in the right direction or suggest some info in this matter?

Thanks guys,

H.

PokeItWithAStick · Accepted Answer · 2014-07-07 05:21:04Z

3

I've had this problem - you have to filter the data using search before you paginate it.

      <li class="paginationclass" ng-repeat="datalist in datalists | filter:search | pagination: curPage * pageSize | limitTo: pageSize ">

answered Jul 7, 2014 at 5:21

PokeItWithAStick

3162 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mr H Over a year ago

YOU BEAUTY. Thanks mate.

Collectives™ on Stack Overflow

How to search a JSON with AngularJS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related