Question

我有几个JSON数据源，用于过滤ng-repeat循环中的数据。一组完美地合作，另一组（看似相同）没有，我不知道为什么。

模块：

var app = angular.module('myApp', ['app.services.data']);

服务

angular.module('app.services.data', [])
.service('emails', ['$http', function($http){
   var promise = null;
      return function() {
        if (promise) {
          return promise;
        } else {
          promise = $http.get('data/emails.json');
          return promise;
        }
      };
  }])
  .service('brands', ['$http', function($http){
     var promise = null;
      return function() {
        if (promise) {
          return promise;
        } else {
          promise = $http.get('data/brands.json');
          return promise;
        }
      };
  }])
  .service('collections', ['$http', function($http){
        var promise = null;
      return function() {
        if (promise) {
          return promise;
        } else {
          promise = $http.get('data/collections.json');
          return promise;
        }
      };
  }]);

emails.json示例：

[
   {
      "id": 32,
      "emailMetrics" [],
      "date": "2015-04-24",
      "brand": "Brand A"
   }
]

brands.json例子：

[
   {
      "id": 48,
      "brandMetrics" [],
      "name": "Brand K"
   }
]

collections.json示例：

[
   {
      "id": 23,
      "collectionMetrics" [],
      "name": "Collection D"
   }
]

控制器：

angular.module('myApp').controller('mainCtrl', ['$scope', 'emails', 'brands', 'collections', function($scope, emails, brands, collections) {
   emails().success(function(emails) {
      $scope.emails = emails;
   });    
   brands().success(function(brands) {
      $scope.brands = brands;
   });
   collections().success(function(collections) {
      $scope.collections = collections;
   });

   $scope.viewCount = 'metrics[0].views';
}]);

查看：

<ul data-ng-repeat="brand in brands | orderBy:viewCount:true | limitTo:'4'">
    <li>Some Label</li>
    <li class="card" data-ng-repeat="email in emails | orderBy:viewCount:true | filter:{brand:brand.name} | limitTo:'3'">
      ... 
    </li>
</ul>

<ul data-ng-repeat="collection in collections | orderBy:viewCount:true | limitTo:'2'">
    <li>Some Label</li>
    <li class="card" data-ng-repeat="email in emails | orderBy:viewCount:true | filter:{collection:collection.name} | limitTo:'7'">
      ... 
    </li>
</ul>

在上面的例子中，第一个父/子循环完美地工作。第一个ng-repeat根据查看次数查询4个最受欢迎品牌的“品牌”JSON，然后嵌套的ng-repeat从“电子邮件”JSON中获取3个最受欢迎的电子邮件，并使用来自中的键/值来过滤数据父母ng-repeat。

然而，第二部分在没有执行循环的情况下失败。这很奇怪，因为除了父重复的不同名称外，它们都是相同的。

所有代码都已经过linted / validated。

有没有人想过为什么会出现问题？

Answer 1

问题是您在两次重复的电子邮件列表中的过滤器。

第一个重复是使用filter: {brand:brand.name}进行过滤。这是在每个电子邮件对象中搜索与此brand.name中定义的ng-repeat中的值相匹配的属性“品牌”。这很好。

您的第二次重复是使用filter: {collection:collection.name}进行过滤。这是问题所在，因为您的电子邮件对象上没有“集合”键/值对。这有效地过滤掉所有电子邮件。

emails.json应如下所示：

[
   {
      "id": 32,
      "emailMetrics" [],
      "date": "2015-04-24",
      "brand": "Brand A",
      "collection": "Collection D"
   }
]

来自JSON的两个相同的嵌套ng-repeat过滤器 - One不起作用？

1 个答案: