Question

所以我有以下服务/工厂设置，应该查询JSON文件：

myappServices.factory('Result', ['$resource',
    function($resource){
        return $resource('search.json', {}, {
            query: { method:'GET', params: {}, isArray:true }
        });
    }]);

然后在我的SearchCtrl中我有：

    myappControllers.controller('SearchCtrl', function($rootScope, $scope, $state, Result, $location) {

    $scope.query = ($state.includes('search') ? $location.search()['q'] : '');
    $scope.filterQuery = ($state.includes('search') ? $location.search()['q'] : '');

    $scope.queryChanged = function () {
        if($scope.query){
            $state.go('search', {'q': $scope.query} );
            $scope.results = Result.query();
        } else {
            $location.search('q', null);
        }
        $scope.filterQuery = $scope.query;
    }

    if($scope.query){
        $scope.results = Result.query();
    } else {
        $location.search('q', null);
    }

});

搜索结果页面如下所示：

<ul class="ng-hide" ng-show="results.length > 0">
    <li ng-repeat="result in results">
        <a href="{{result.url}}">{{result.name}}</a>
        <p>{{result.snippet}}</p>
    </li>
</ul>

<p class="ng-hide" ng-show="results.length == 0">Nothing here!</p>

如果我进行如下查询：

/search?=hello

然后返回JSON文件中的所有结果，无论我搜索到的是什么（应该只显示匹配的结果）。

但是，如果我不进行查询，则不会显示任何结果（正确行为）。

为什么不对JSON文件使用查询来过滤结果？

我最初将转发器设为：

<li ng-repeat="result in results = ( results | filter:filterQuery )">

但是在这种情况下这是不正确的，因为它会告诉我结果但是使用filterQuery过滤它们。但实际上，如果没有查询，将永远不会有任何结果，因此删除了转发器的这一部分。因为我不想过滤列表但返回过滤的列表。

所以看起来我在服务中缺少一些东西来处理这个问题。

Answer 1

app.factory('querySvc', ['$q', '$resource', querySvc]);

function querySvc($q, $resource) {
    var service = {
         getSearch: getSearch
    }
    return service;

 function getSearch(){
    var deferred = $q.defer();

    $resource('search.json').query( function(data){
         deferred.resolve(data);
    }, function(error){
         // handle error
    });
    return deferred.promise;
 }

然后你可以这样称呼它：

 querySvc.getSearch().then(function (data){
     $scope.results = data;
 }, function(error){
     //handle error here
 });

关于你的第一个说明：当您实例化控制器时，它会执行其中的所有内容。

因此，如果您想在用户点击某处时调用此函数，可以将函数注册到范围内：

$scope.querySearch = function(){
     querySvc.getSearch().then(function (data){
         $scope.results = data;
     }, function(error){
         //handle error here
     });
}

然后，在您的视图中，您必须在触发事件时调用它。我不记得你需要的事件，但我会告诉你一种方法：

<span ng-click="querySearch()" />

单击跨度时会触发此功能。

Answer 2

已编辑：简化您的资源，因此无法定义query：

myappServices.factory('Result', ['$resource',
    function($resource){
        return $resource('search.json');
    }]);

尝试更改控制器以清除结果，并仅在进行查询时设置它们：

myappControllers.controller('SearchCtrl', function($rootScope, $scope, $state, Result, $location) {

    $scope.query = ($state.includes('search') ? $location.search()['q'] : '');
    $scope.filterQuery = ($state.includes('search') ? $location.search()['q'] : '');

    $scope.results = [];
    $scope.queryChanged = function () {
        if($scope.query){
            $state.go('search', {'q': $scope.query} );
        } else {
            $scope.results = Result.query({q:$scope.query});
        }
        $scope.filterQuery = $scope.query;
    }
});

Answer 3

在控制台中，查看“网络”选项卡以查看请求是否有错误和/或查看响应的内容。如果响应的状态代码为200且内容正确，则检查响应以查看数据的结构是否正确results.length（它返回列表）。

在AngularJS中搜索JSON文件

3 个答案: