Question

我的目的是创建一个全局搜索工具栏，我可以在其中搜索应用程序中的任何数据。

我已经使用过滤器搜索单一类型的资源，例如：

<div ng-repeat="project in projects | filter:projectFilter">
 /* TODO template */
</div>

项目数组绑定到 $ scope ，数据由 ProjectsService 提取。

我想搜索应用程序中的任何数据，如项目，客户等。
我在考虑输入和选择标记。 select选择我需要过滤的资源并输入资源名称。

有没有办法在运行时将项目数组改为其他内容？

Answer 1

只要您知道可用数组的名称并且所有数组都在$ scope中，就应该没有问题：

<div ng-controller="myCtrl">
    ...
    <select ng-model="haystack" ng-options="model for model in models">
        <option value=""></option>
    </select>
    ...
    <input type="search" ng-model="needle" placeholder="search query..." />
    ...
    Results: {{(results = search(haystack, needle) || []).length}}
    <ul><li ng-repeat="item in results">...</li></ul>
    ...

app.controller('myCtrl', function ($filter, $scope) {
    $scope.models = ['customers', 'projects'];
    $scope.projects = [...];
    $scope.customers = [...];

    $scope.search = function (haystack, needle) {
        var arr = (haystack && $scope[haystack]) ? $scope[haystack] : [];
        if (!needle) return arr;

        return $filter('filter')(arr, needle);
    };
});

另请参阅此 short demo 。

使用过滤器和服务的全局搜索

1 个答案: