Question

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

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

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

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

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

正如您所看到的，我已经有了一个过滤器，但我想要一个基于查询字符串的搜索，以便我可以使用历史记录在选择记录等后返回结果。

我在这里的第一个问题是，这个列表实际上是使用了phones.json来获取数据，但是我没有在代码中的任何地方指定它......所以这是如何工作的？假设有一些魔法正在发生，但我看不到它。

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

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文件中提取数据似乎非常透明。如果页面加载时查询字符串在那里，该方法还应该列出数据...所以也许这应该组合成一个控制器用于列表和搜索？

上面的代码在我进行搜索时不会过滤JSON数据...所以查询字符串没有被使用...但我认为这是因为我不明白应用程序知道如何查看'phones.json'文件？

过滤和搜索的HTML：

<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>

Answer 1

好的，以确保我理解正确：

您已使用Angular's filter filter
此搜索是使用绑定到名为query
您正在尝试在更改视图和返回时保留搜索字词
您希望将其保留在网址

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

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

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

每次query更改时都会执行此功能，并相应地更新URL。现在一切都应该解决了。请参阅此fiddle。

作为旁注，在URL中持久查询可能不是最好的主意，因为用户的浏览器在离开搜索视图后仍然可见。例如，您可以使用session storage。

使用查询字符串搜索AngularJS资源

1 个答案: