如何在AngularJS中创建服务器端过滤器

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

本文关键字：创建 服务器端 过滤器 AngularJS      更新时间：2023-09-26

我想为我的搜索输入字段创建一个过滤器。数据在服务器上，过滤器应过滤来自服务器的结果。目前，我已经创建了一个变量"res"，该变量具有方法PUT的API的Resource。

我用ng model="searching"创建了一个输入字段，并在我的表中添加了一个ng repeat"data in datalist|search:searching"

我知道过滤器有以下脚手架：

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

有人能给我一个提示吗？

这是我的考虑：

index.html:

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

test.html（这是我的表单）：

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

在我的过滤文件中，我有：

.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;
    };
}]);

我想，我需要来自后端的所有数据，因为我之前说过，默认过滤器（而不是我的自定义过滤器）只会得到第一个分页站点的结果。例如，当我正在寻找一个名为"test"的类别，并且该类别位于Paging第2页时，过滤器在第2页上找不到类别为"test"的数据。

这与服务器端无关。但你可以通过内置的角度滤波器来实现你想要的，比如：

<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

如果你有复杂的对象，你也可以使用相同的bult-in过滤器，比如：

<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

相关文章：