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

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

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

        }
    }]);

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

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

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

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

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

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

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

        }
    }]);

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

因此，它应该使用查询字符串来查找结果。但是我该怎么做呢？从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>

{{phone.snippet}

好的，为了确保我正确理解：

• 您已经有了一个使用
• 此搜索使用绑定到名为

  query

• 更改视图并返回时，您正在尝试保留搜索词
• 您想将其保留在URL中

您不需要新的控制器或新的输入。在

电话列表Ctrl

控制器中，添加

$scope.query=$location.search（）.q

。这将从URL读取

q

参数，并将值写入

query

，这将自动填充输入并过滤结果

要执行相反的操作（即将

query

的值写入URL），请将

ng change

属性添加到输入（

）

，并将相应的功能添加到控制器：

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

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

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

        }
    }]);

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

每当

查询

更改时，将执行此函数，并相应地更新URL。现在一切都会好起来的。看这个

---

另外，在URL中持久化查询可能不是最好的主意，因为在用户离开搜索视图后，它将在用户的浏览器中保持可见。例如，您可以使用。

回答您的附带问题：在资源配置中，

params

插入到URL中。您的URL是

'phones/：phoneId.json'

。

：

表示

phoneId

是一个可变部分，应该用值替换。您的

params

对象包含一个

phoneId

键，因此Angular使用其值替换

：phoneId

。URL最后是

“phones/phones.json”

。这里没有魔法。：）啊，你是说这个位：

参数：{phoneId:'phones'}

。谢谢你，这会让你清醒的。有没有搜索列表的想法？谢谢。关于主要问题：我有点困惑。您是否希望

$resource

服务在文件内容内执行搜索？因为它不能这样做

$resource

向服务器发出请求，但不对返回的数据执行任何转换。不过，您可以在客户端进行搜索。这就是你想要的吗？不，基本上我可以通过中继器上的过滤器输入过滤数据（它会在你键入时实时发生），例如

但是我想添加一个使用查询字符串的完整表单，然后用这种方式过滤数据，如果这样做有意义的话？它应该在JSON文件中返回与查询匹配的对象。好吧，在重新阅读问题之后，我开始理解您已经有了一个按输入搜索，但您希望用户输入的术语和结果在转到另一个页面并返回时保留。是吗？如果我想过滤某个特定的东西呢？例如，只有电话号码？当角度过滤器（如你所说）搜索所有东西时。。。有更多定制控件的示例吗？请查看

| filter:{name:query}

只查看名称。如果这还不够，您可以将谓词函数传递给过滤器，或者创建自己的过滤器。这都是有文档记录的。好吧，那么有没有一天你会用角度搜索某个东西而不使用过滤器呢？或者这是在Angular应用程序中搜索的正确方式吗？啊，好吧，我明天会玩它。感谢您迄今为止的帮助。这是正确的搜索方式。如果需要使用JavaScript（而不是在视图中）进行搜索，可以在控制器或服务中插入过滤器（或任何其他过滤器）：

.controller（函数（$scope，filterFilter）{filterFilter（listofsufftosearchin，thingToSearchFor）}

。