使 AngularJS 页面兼作搜索结果页面答案

【问题标题】：Make AngularJS page double as search results page使 AngularJS 页面兼作搜索结果页面
【发布时间】：2014-08-18 21:26:44
【问题描述】：

我有一个基本表，我在其中显示通过 AngularJS 从数据库中提取的数据。我还有一个使用 AngularJS 过滤数据的搜索字段：

<input ng-model="search" id="search" type="text" placeholder="Search" value="">
<div ng-controller="eventsController")>
    <table>
        <tr ng-repeat="event in events | filter:search">
            <td><span ng-bind="event.title"></span></td>
            <td><span ng-bind="event.date_start"></span></td>
        </tr>
    </table>
</div>
<script>
    function EventsController($scope, $http) {
        $http.get('/api/all-events').success(function(events) {
            $scope.events = events;
        });
    }
</script>

这对于用户定义的搜索非常有用，但是如果我想在页面加载时运行特定的过滤器同时保持搜索功能怎么办？有没有一种方法可以使用 AngularJS 根据 URL 参数（即 example.com?search=foo）自动过滤结果？理想情况下，输入字段的值也应设置为 URL 参数。

【问题讨论】：

这个问题和过滤无关。您要问的只是如何获取$routeParams (docs.angularjs.org/api/ngRoute/service/$routeParams) 或查询字符串 (stackoverflow.com/questions/16964444/…)。检查search 后，只需将$scope.search 设置为该值，一切都应该到位
我认为您需要将$location 添加到您的控制器。 EventsController($scope, $http, $location) $location 服务解析浏览器地址栏中的 URL。然后使用$location.search()。

标签： javascript angularjs search filter pageload

【解决方案1】：

正如 cmets 所说，这与filter 无关。它更多的是关于如何组织代码以自定义发送到服务器的 URL 路径。您可以尝试这样做：

function EventsController($scope, $http) {
    // this field is bound to ng-model="search" in your HTML 
    $scope.search = 'ALL';

    $scope.fetchResults = function() {
        var path;
        if ($scope.search === 'ALL') {
            path = '/api/all-events';
        } else {
            path = '/search?input=' + $scope.search;
        }

        // here we send different URL path
        // depending on the condition of $scope.search
        $http.get(path).success(function(events) {
            $scope.events = events;
        });
    };

    // this line will be called once when controller is initialized
    $scope.fetchResults();
}

以及您的 HTML 代码，确保您的控制器位于输入字段和搜索按钮的父 div 上。对于搜索按钮，您在单击时调用fetchResults()：

<div ng-controller="eventsController")>
    <input ng-model="search" id="search" type="text" placeholder="Search" value="">
    <button ng-click="fetchResults()">Search</button>
    <div>
        <table>
            <tr ng-repeat="event in events | filter:search">
                <td><span ng-bind="event.title"></span></td>
                <td><span ng-bind="event.date_start"></span></td>
            </tr>
        </table>
    </div>
</div>

【讨论】：