使用查询字符串搜索AngularJS资源 [英] Search AngularJS resource using query string

问题描述

我在AngularJS应用中设置了以下资源:

I have the following resource set up in my AngularJS app:

var phonecatServices = angular.module('phonecatServices', ['ngResource']);

phonecatServices.factory('Phone', ['$resource',
  function($resource){
    return $resource('phones/:phoneId.json', {}, {
      query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
    });
  }]);

默认情况下，它们通过控制器列出如下:

And by default they are listed like so via the controller:

var phonecatControllers = angular.module('phonecatControllers', []);

phonecatControllers.controller('PhoneListCtrl', ['$scope', 'Phone',
  function($scope, Phone) {
    $scope.phones = Phone.query();
    $scope.orderProp = 'age';
  }]);

如您所见，我已经有一个过滤器，但是我希望基于查询字符串进行搜索，以便可以在选择记录等之后使用历史记录"返回到结果.

As you can see I already have a filter but I want a query string based search so that I can use the History to get back to the results after choosing a record, etc.

我在这里的第一个问题是，该列表实际上使用phones.json来存储数据，但是我没有在代码中的任何地方指定此名称……所以这是如何工作的?假定正在发生某种魔术，但我看不到.

所以回到最初的问题，我构建了以下搜索控制器:

So back to the initial question, I have built the following search controller:

phonecatControllers.controller('SearchCtrl', ['$scope', '$http', '$location', 'Phone',
    function ($scope, $http, $location, Phone) {
        $scope.keywords = $location.search()['q'];
        // The function that will be executed on button click (ng-click="search()")
        $scope.search = function() {    
            $location.path('phones').search('q', $scope.keywords);

            $scope.phones= Phone.query($scope.keywords);

        }
    }]);

因此，应使用查询字符串查找结果.但是我该怎么做呢?从JSON文件中提取数据的方式看起来非常透明.如果页面上存在查询字符串，该方法还应该列出数据...所以也许应该将其组合到列表和搜索的一个控制器中?

So it should use the query string to find the results. But how do I do this? It seems very transparent how the data is pulled from the JSON file. The method should also list data if the query string is there on page load... so perhaps this should be combined into one controller for both the list and search?

上面的代码在执行搜索时不会过滤JSON数据...因此未使用查询字符串...但是我想是因为我不了解应用程序如何查找"phones.json"文件?

The code above doesn't filter the JSON data when I do a search... so the query string isn't being used... but I presume it's because I don't understand how the app knows to look in the 'phones.json' file?

用于过滤和搜索的HTML:

The HTML for the filtering and search:

<div class="control-group">
    <label class="control-label">Filter:</label>
    <div class="controls">
        <input ng-model="$parent.query">
    </div>
</div>
<div class="control-group">
    <label class="control-label">Sort by:</label>
    <div class="controls">
        <select ng-model="$parent.orderProp">
            <option value="name">Alphabetical</option>
            <option value="age">Newest</option>
        </select>
    </div>
</div>

<hr/>

<div ng-controller="SearchCtrl">
    <form class="form-search" ng-submit="search()">
        <label>Search:</label>
        <input type="text" name="q" ng-model="keywords" class="input-medium search-query" placeholder="Keywords...">
        <button type="submit" class="btn" ng-click="search()">Search</button>
    </form>
</div>

列表的HTML:

<ul class="phones">
    <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"
    class="thumbnail phone-listing">
        <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
        <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
        <p>{{phone.snippet}}</p>
    </li>
</ul>

推荐答案

确定，以便确保我正确理解:

OK so to ensure that I understand correctly:

• 您已经使用 Angular的过滤器过滤器进行了按需搜索
• 此搜索是通过绑定到名为 query
的变量的输入来实现的
• 您正在尝试在更改视图并返回时保留搜索字词
• 您想要将其保留在URL中

您不需要新的控制器或新的输入.在 PhoneListCtrl 控制器中，添加 $ scope.query = $ location.search().q .这将从URL中读取 q 参数，并将值写入 query 中，这将自动填充输入并过滤结果.

You don't need the new controller or the new input. In the PhoneListCtrl controller, add $scope.query = $location.search().q. This will read the q parameter from the URL and write the value in query, which will automatically fill the input and filter your results.

要执行相反的操作(即将 query 的值写入URL)，请在输入中添加 ng-change 属性(< input ng-model ="query" ng-change ="queryChanged()"/>)，并将相应的函数添加到您的控制器中:

To do the reverse (ie writing the value of query to the URL), add a ng-change attribute to your input (<input ng-model="query" ng-change="queryChanged()"/>), and add the corresponding function to your controller:

$scope.queryChanged = function () {
    $location.search('q', $scope.query)
}

此函数将在每次 query 更改时执行，并将相应地更新URL.现在一切都应该解决了.参见此小提琴.

This function will be executed every time the query changes and it will update the URL accordingly. Everything should work out now. See this fiddle.

作为一个补充说明，将查询保留在URL中可能不是最好的主意，因为在用户离开搜索视图后，浏览器将在用户的浏览器中保持可见.例如，您可以使用会话存储.

As a side note, persisting the query in the URL might not be the best idea, as it will remain visible is the user's browser after they have left the search view. You could use session storage, for example.

这篇关于使用查询字符串搜索AngularJS资源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！