Question

我是使用Angular的新手，我正在处理我正在进行的项目的特定部分。对于其中一个模板，我想使用来自不同商店的JSON文件的信息，仅显示有关用户当前所在页面的商店的信息。

我正在尝试使用$ routeParams过滤掉商店（因为商店ID是我正在进行路由的方式），但我的过滤器只返回一个空数组。

我的路由如下：

myProto.config(['$routeProvider', 
    function($routeProvider) {
  $routeProvider.
     when('/home', {
         templateUrl: 'partials/merchants.html',
         controller: 'merchantListCtrl'
     }).
     when('/:merchantId', {
        templateUrl: 'partials/deals.html',
        controller: 'dealListCtrl'
     }).
     otherwise({redirectTo: '/home'});
}]);

我阅读JSON文件的服务如下：

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

merchantProtoServices.factory('Merchant', ['$resource',
   function($resource){
      return $resource('merchants/merchants.json', {}, {
         query: {method:'GET', isArray:true}
      });
}]);

我正在拉形式的JSON文件如下所示： [

   {
        "id": "kohls",
        "name": "Kohls",
    },

    {
        "id": "best-buy",
        "name": "Best Buy",
    }

]

最后我在控制器中运行的过滤器如下所示：

var merchants = Merchant.query();

$scope.merchant = $filter('filter')(merchants, {id: $routeParams.merchantId});

我想要它做的是返回具有该ID的所有商家的数组（我的下一步将是选择该数组中的第一个对象，因为它应该只包含一个商家）。相反，它只返回一个空数组。

我怎样才能真正让这个过滤器工作（或者我应该使用哪种更好的方法）？

Answer 1

Merchant.query（）是异步通话，您尝试在从服务器收到回复之前过滤商家，请尝试以下代码。

var merchants = Merchant.query()
    .$promise.then(function(merchants) {
     $scope.merchant = $filter('filter')(merchants, {id: $routeParams.merchantId});
    });

Answer 2

除了@sss给出的答案

此外，您可以考虑将查询移至路线的解决区块：

myProto.config(['$routeProvider', 'Merchant', 
    function($routeProvider, Merchant) {
  $routeProvider.
     when('/home', {
         templateUrl: 'partials/merchants.html',
         controller: 'merchantListCtrl'
     }).
     when('/:merchantId', {
        templateUrl: 'partials/deals.html',
        controller: 'dealListCtrl',
        resolve:{
            merchants: function () {
                return Merchant.query();
            }
        }
     }).
     otherwise({redirectTo: '/home'});
}]);

这样，angular会延迟更改路径，直到查询承诺得到解决，您可以立即在控制器中使用该阵列：

function GenericController ($scope, $filter, $routeParams, merchants) {
    $scope.merchant = $filter('filter')(merchants, {id: $routeParams.merchantId});
}

以下是对此的更多信息： Delaying AngularJS route change until model loaded to prevent flicker

在AngularJS中的数组中搜索JSON文件中的特定对象

2 个答案: