{{result.carType.name}}, {{result.carDetails.doors}} 门, £{{result.price.value}} - {{ result.company.name }}
- {{result.carDetails.hireDuration}} 天租赁
- 空调
- 无里程限制
- 防盗保护
AngularJS：自定义过滤器和ng-repeat
AngularJS：自定义过滤器和ng-repeat
我是一个AngularJS的新手，正在构建一个小型的概念验证租车列表应用程序，通过ng-repeat从一些JSON中提取数据并渲染出各种数据的不同部分。同时使用了一些过滤器:\n
过滤器
门数:
提供商:
Atlas Choice
Holiday Autos
Avis
\n现在我想在我的控制器中创建一个自定义过滤器，可以迭代ng-repeat中的项目并返回只满足某些条件的项目 - 例如，我可以根据选中的“提供商”复选框创建一个值数组，然后对每个ng-repeat项进行评估。但是，我无法弄清楚如何在语法上做到这一点 - 有人能帮帮我吗？\n这是我的Plunker链接：\nhttp://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview
问题的出现原因：在ng-repeat过滤器中调用多个函数过滤器，但想要实现OR过滤而不是AND过滤。
解决方法：创建一个函数来实现OR过滤。下面是一个示例代码（但无法正常工作）：
最好的解决方法是创建一个自定义过滤器来实现OR过滤，以下是一个示例代码（可以正常工作）：
app.filter('orFilter', function() {
return function(items, filter1, filter2) {
var filtered = [];
angular.forEach(items, function(item) {
if (filter1(item) || filter2(item)) {
filtered.push(item);
}
});
return filtered;
};
});
然后，在ng-repeat过滤器中使用自定义过滤器：
以上就是关于在AngularJS中使用自定义过滤器和ng-repeat过滤器的问题的出现原因和解决方法。
AngularJS : 自定义过滤器和ng-repeat
在AngularJS中，我们可以使用过滤器对数据进行过滤和排序。过滤器可以在ng-repeat指令中使用，以便根据特定条件对数据进行筛选。然而，有时候我们可能需要传递多个参数给自定义过滤器，而不只是一个参数。下面我们来看看如何实现这个需求。
在下面的代码中，我们可以看到在ng-repeat指令中使用了一个自定义过滤器`cartypefilter`。这个过滤器可以接受一个名为`search`的模型作为参数，并根据这个参数对数据进行筛选。
自定义过滤器`cartypefilter`的定义如下：
app.filter('cartypefilter', function() {
return function(items, search) {
if (!search) {
return items;
}
var carType = search.carType;
if (!carType || '' === carType) {
return items;
}
return items.filter(function(element, index, array) {
return element.carType.name === search.carType;
});
};
});
在这个过滤器中，我们首先判断是否传入了`search`参数，如果没有，则返回原始数据。然后，我们获取`search.carType`的值，并判断是否存在以及是否为空字符串。如果`carType`不存在或为空字符串，则返回原始数据。最后，我们使用`filter`方法对数据进行筛选，只返回`carType.name`与`search.carType`相等的元素。
如果你想看到这个自定义过滤器的实际运行效果，可以访问以下链接：
[http://plnkr.co/edit/kBcUIayO8tQsTTjTA2vO?p=preview](http://plnkr.co/edit/kBcUIayO8tQsTTjTA2vO?p=preview)
以上就是如何在AngularJS中使用自定义过滤器并传递多个参数的方法。希望对你有所帮助！
AngularJS: 自定义过滤器和ng-repeat
在AngularJS中，如果你想运行一些自定义的过滤逻辑，你可以创建一个函数，该函数以数组元素作为参数，并根据它是否应该在搜索结果中返回true或false。然后，将它传递给filter指令，就像你使用search对象一样，例如：
JS:
$scope.filterFn = function(car)
{
// Do some tests
if(car.carDetails.doors > 2)
{
return true; // this will be listed in the results
}
return false; // otherwise it won't be within the results
};
HTML:
......
正如你所见，你可以串联多个过滤器，因此添加自定义过滤函数不会强制你移除使用search对象的先前过滤器（它们将无缝地一起工作）。
非常有趣！过滤器可以简化为return car.carDetails.doors > 2;。
当然可以。但是为了更清楚地作为学习示例，我决定选择更详细的版本。
如果你需要更复杂的过滤器，你还可以通过传递多个参数给过滤器。
我不明白这个函数什么时候被调用？
如果定义为控制器函数的过滤器，是否有办法传递多个参数，而不是作为显式$filter定义的过滤器？
很遗憾，我不知道。
是否有一种方法去匹配一个过滤器或另一个过滤器？例如，如果你有2个自定义过滤器，你能匹配customFilter1或customFilter2吗？
我喜欢return (car.carDetails.doors > 2);
当你直接使用$scope时，你可以通过$scope直接访问搜索条件。当你使用"as vm"选项时，该怎么办？在这种情况下，'this'不是控制器。
如果我们要灵活使用，函数可以内联为data-ng-repeat="r in results | filter:search | filter:function(r){return r.carDetails.doors>2;}"或类似的方式。但是，如果你希望未来的合同再次调用该函数，则推荐使用可读性较高的答案。性能上没有任何收益。