How can I create a server-side filter in AngularJS? [duplicate]

Question

I want to create a filter for my search input-field. The data is on the server and the filter shall to filter the result from the server. Currently I've created a variable "res" which has the Resource of my API with the method PUT.

I've created a input field with ng-model="searching" and in my table I've added a ng-repeat "data in datalist | search: searching"

I know that the Filter has the following scaffolding:

.filter('search', function () {
    return function (input, searchtext) {
        return ...;
    };
});

Can anyone give me a hint what I have to do?

Answer 1

That's my consideration:

index.html:

<input type="search" class="form-control" placeholder="Search" ng-model="searchText">

test.html (here is my form):

...
<tr ng-repeat="data in datalist | offset: (currentPage-1)*itemsPerPage | limitTo: itemsPerPage | search: searchText">
...

and in my Filter-File I have:

.filter('search', ['$scope', '$resource', '$http', 'apiHost', function ($scope, $resource, $http, apiHost) {
    return function (input) {
        var url = $resource(apiHost + '/:id', {
            id: '@id'
        });

        var req = {
            method: 'GET',
            url: url,
            data: input
        };

        $http(req).success(function (data) {
            var dataresult = data;
        });
        return dataresult;
    };
}]);

I thought, I need all the data from the backend, because what I'm telling before, the default filter (not my custom filter) gets only the result of the first pagination site. For example when I'm looking for a category with the name "test" and the category is on Pagination page 2 the filter doesn't find the data with the category "test" on page 2.

Answer 2

This has nothing to do with server-side. But you may achieve what you want with a built-in angular filter, like this:

<input type="text" ng-model="query" placeholder="Filter..." />
<ul>
    <li ng-repeat="item in items | filter: query">
        {{ item }}
    </li>
</ul>

http://plnkr.co/edit/llLirkqIJmEWAue0QdVk?p=preview

If you have complex objects, you can also use the same bult-in filter, like this:

<input type="text" ng-model="query" placeholder="Filter..." />
<ul>
    <li ng-repeat="item in items | filter: { name: query }">
        {{ item.name }}
    </li>
</ul>

http://plnkr.co/edit/L7DMn0xncHDQqyXDD0TR?p=preview