AngularJS :自定义过滤器和ng-repeat
AngularJS :自定义过滤器和ng-repeat
提问于 2013-05-15 18:46:27
我是一个AngularJS新手，我正在开发一个小型的概念验证租车列表应用程序，它引入一些JSON，并通过ng-repeat呈现这些数据的不同部分，带有几个过滤器：
<article data-ng-repeat="result in results | filter:search" class="result">
<header><h3>{{result.carType.name}}, {{result.carDetails.doors}} door, £{{result.price.value}} - {{ result.company.name }}</h3></header>
<ul class="result-features">
<li>{{result.carDetails.hireDuration}} day hire</li>
<li data-ng-show="result.carDetails.airCon">Air conditioning</li>
<li data-ng-show="result.carDetails.unlimitedMileage">Unlimited Mileage</li>
<li data-ng-show="result.carDetails.theftProtection">Theft Protection</li>
</ul>
</article>
<h2>Filters</h2>
<h4>Doors:</h4>
<select data-ng-model="search.carDetails">
<option value="">All</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="9">9</option>
</select>
<h4>Provider:</h4>
Atlas Choice <input type="checkbox" data-ng-model="search.company" ng-true-value="Atlas Choice" ng-false-value="" value="Atlas Choice" /><br>
Holiday Autos <input type="checkbox" data-ng-model="search.company" ng-true-value="Holiday Autos" ng-false-value="" value="Holiday Autos" /><br>
Avis <input type="checkbox" data-ng-model="search.company" ng-true-value="Avis" ng-false-value="" value="Avis" /><br> 现在我想在我的控制器中创建一个自定义过滤器，它可以迭代我的ng-repeat中的项，并只返回满足特定条件的项-例如，我可以创建一个值的数组，根据该数组选中“provider”复选框，然后根据该值计算每个ng-repeat项。就语法而言，我就是想不出该怎么做--有人能帮上忙吗？
回答 3
Stack Overflow用户
发布于 2013-05-15 19:33:07
如果您仍然需要自定义筛选器，可以将搜索模型传递给筛选器：
<article data-ng-repeat="result in results | cartypefilter:search" class="result">其中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;
});
};
});Stack Overflow用户
发布于 2014-06-12 01:56:29
您可以在同一个ng-repeat过滤器中调用1个以上的函数过滤器
<article data-ng-repeat="result in results | filter:search() | filter:filterFn()" class="result">Stack Overflow用户
发布于 2013-05-15 19:26:57
解决这个问题的最简单的方法之一是使用$，它是search all。
这里有一个柱塞，它显示了它的工作。我已将复选框更改为单选(因为我认为它们应该是互补的)。
http://plnkr.co/edit/dHzvm6hR5P8G4wPuTxoi?p=preview
如果你想要一种非常具体的方法(而不是一般的搜索)，你需要在搜索中使用函数。
文档在这里
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16563018
复制相关文章
相似问题