For my AngularJS app I have an ng-repeat in an ng-repeat like so:
对于我的AngularJS应用程序,我在ng-repeat中有一个ng-repeat,如下所示:
Html:
<div ng-app="myApp">
<div ng-controller="myController">
<h2>working filter</h2>
<div ng-repeat="category in categories">
<h3>{{category}}</h3>
<div ng-repeat="item in items | filter:{price.red: 0} ">{{item.name}}</div>
</div>
<h2>broken filter</h2>
<div ng-repeat="category in categories">
<h3>{{category}}</h3>
<!-- price[category] should be red, blue, yellow, depending on the category in the ng-repeat -->
<!-- price[category] should be bigger then 0 (or not zero, negative values will not occur) -->
<div ng-repeat="item in items | filter:{price[category]: 0} ">{{item.name}}</div>
</div>
</div>
</div>
Javascript:
var myApp = angular.module('myApp', []);
myApp.controller('myController', function ($scope) {
$scope.categories = ['red', 'blue', 'yellow'];
$scope.items = [
{name: 'one', price:{red: 0, blue: 1, yellow: 3} },
{name: 'two', price:{red: 2, blue: 0, yellow: 0}},
]
});
Please see my jsFiddle http://jsfiddle.net/hm8qD/
请看我的jsFiddle http://jsfiddle.net/hm8qD/
So I ran into two problems:
所以我遇到了两个问题:
- The flter does not accept [] brackets so I cannot make the filter dynamic, based on the category
- The filter needs to return items that have a price[category] greater then zero.
flter不接受[]括号,因此我无法根据类别使过滤器动态化
过滤器需要返回价格[类别]大于零的商品。
For the greater then zero I could just make a custom filter. However as far as I know filters don't accept parameters so I have no way of getting the category (red, blue or yellow) to it.
对于大于零,我可以制作自定义过滤器。但据我所知,过滤器不接受参数,所以我无法获得类别(红色,蓝色或黄色)。
Please note this is an simplified version of my actual code and this context might not make the best of sense. I hope I was clear in explaining what I need the filter to do, since I'm new to AngularJS.
请注意,这是我的实际代码的简化版本,这个上下文可能没有最好的意义。我希望我能清楚地解释我需要过滤器做什么,因为我是AngularJS的新手。
2 个解决方案
#1
3
Apparently it is actually possible to pass arguments to your filter, but you have to make a custom filter instead of using "filter: expression". What I did was create a custom filter which takes the items and category as arguments and returns the array with filtered items.
显然,实际上可以将参数传递给过滤器,但是您必须创建自定义过滤器而不是使用“filter:expression”。我所做的是创建一个自定义过滤器,它将items和category作为参数,并返回带有过滤项的数组。
myApp.filter('myFilter', function () {
return function (items, category) {
var newItems = [];
for (var i = 0; i < items.length; i++) {
if (items[i].price[category] > 0) {
newItems.push(items[i]);
}
};
return newItems;
}
});
See the updated Fiddle here: http://jsfiddle.net/hm8qD/3/
在这里查看更新的小提琴:http://jsfiddle.net/hm8qD/3/
#2
1
I found a different and quite neat solution for sending parameters to the filter (written in es6):
我找到了一个不同的,非常简洁的解决方案,用于向过滤器发送参数(用es6编写):
$scope.myFilter = (category) => {
return (item) => {
if(category === 'fish' && item.type === 'salmon'){
return true
}
return false
}
}
the markup would be:
标记将是:
<div ng-repeat="item in items |
filter:myFilter(someCategory)>
{{item.name}}
</div>
So basically you can just scope the "category" into the filter as myFilter returns a function on the format expected by the filter.
因此,基本上您可以将“类别”范围限定在过滤器中,因为myFilter返回过滤器所期望的格式的函数。
#1
3
Apparently it is actually possible to pass arguments to your filter, but you have to make a custom filter instead of using "filter: expression". What I did was create a custom filter which takes the items and category as arguments and returns the array with filtered items.
显然,实际上可以将参数传递给过滤器,但是您必须创建自定义过滤器而不是使用“filter:expression”。我所做的是创建一个自定义过滤器,它将items和category作为参数,并返回带有过滤项的数组。
myApp.filter('myFilter', function () {
return function (items, category) {
var newItems = [];
for (var i = 0; i < items.length; i++) {
if (items[i].price[category] > 0) {
newItems.push(items[i]);
}
};
return newItems;
}
});
See the updated Fiddle here: http://jsfiddle.net/hm8qD/3/
在这里查看更新的小提琴:http://jsfiddle.net/hm8qD/3/
#2
1
I found a different and quite neat solution for sending parameters to the filter (written in es6):
我找到了一个不同的,非常简洁的解决方案,用于向过滤器发送参数(用es6编写):
$scope.myFilter = (category) => {
return (item) => {
if(category === 'fish' && item.type === 'salmon'){
return true
}
return false
}
}
the markup would be:
标记将是:
<div ng-repeat="item in items |
filter:myFilter(someCategory)>
{{item.name}}
</div>
So basically you can just scope the "category" into the filter as myFilter returns a function on the format expected by the filter.
因此,基本上您可以将“类别”范围限定在过滤器中,因为myFilter返回过滤器所期望的格式的函数。