[英]Two identical nested ng-repeat filters from JSON - One doesn't work?
I have a few JSON data sources that I use to filter through data in ng-repeat loops. 我有一些JSON数据源,可用来过滤ng-repeat循环中的数据。 One set works perfect together, the other (which is seemingly identical) does not and I have no idea why.
一套可以完美地一起工作,而另一套(看似相同)则不一样,我也不知道为什么。
Module: 模块:
var app = angular.module('myApp', ['app.services.data']);
Services 服务
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 example: emails.json示例:
[
{
"id": 32,
"emailMetrics" [],
"date": "2015-04-24",
"brand": "Brand A"
}
]
brands.json example: brand.json示例:
[
{
"id": 48,
"brandMetrics" [],
"name": "Brand K"
}
]
collections.json example: collections.json示例:
[
{
"id": 23,
"collectionMetrics" [],
"name": "Collection D"
}
]
Controller: 控制器:
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';
}]);
View: 视图:
<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>
In the above example, the first parent / child loop works flawlessly. 在上面的示例中,第一个父/子循环完美运行。 The first ng-repeat queries the "brands" JSON for the 4 most popular brands based on view count, then the nested ng-repeat gets the 3 most popular emails from the "emails" JSON and filters the data using the key/value from the parent ng-repeat.
第一个ng-repeat根据观看次数查询4个最受欢迎的品牌的“ brands” JSON,然后嵌套的ng-repeat从“ emails” JSON获取3个最受欢迎的电子邮件,并使用键/值过滤数据父级ng-repeat。
However, the second section fails without executing a loop. 但是,第二部分失败而不执行循环。 This is very odd because they are both identical except for a different name for the parent repeat.
这很奇怪,因为除了父级重复的名称不同以外,它们都相同。
All code has been linted / validated. 所有代码均已删除/验证。
Does anyone have any thoughts as to why there would be a problem? 有谁对为什么会有问题有任何想法吗?
The problem is your filter on the email list in the two repeats. 问题是您在两次重复的电子邮件列表中都进行了过滤。
The first repeat is filtering using filter: {brand:brand.name}
. 第一个重复是使用
filter: {brand:brand.name}
。 This is searching each email object for an attribute "brand" that matches the value in brand.name
defined in this ng-repeat
. 这是在每个电子邮件对象中搜索与此
ng-repeat
定义的brand.name
中的值匹配的属性“ brand”。 This works fine. 这很好。
Your second repeat is filtering using filter: {collection:collection.name}
. 您的第二个重复是使用
filter: {collection:collection.name}
进行filter: {collection:collection.name}
。 This is the problem, since your email objects do not have a "collection" key/value pair on them. 这是问题所在,因为您的电子邮件对象上没有“收集”键/值对。 This effectively filters out all emails.
这样可以有效过滤掉所有电子邮件。
emails.json should look like this: emails.json应该看起来像这样:
[
{
"id": 32,
"emailMetrics" [],
"date": "2015-04-24",
"brand": "Brand A",
"collection": "Collection D"
}
]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.