我是AngularJS的新手,我正在构建一个小型的概念验证租车 list 应用程序,该应用程序会提取一些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>
现在,我想在 Controller 中创建一个自定义过滤器,该过滤器可以迭代ng-repeat中的项目,并仅返回满足特定条件的项目-例如,我可以根据哪个“provider”复选框创建值数组被选中,然后评估每个ng-repeat项目。就语法而言,我只是想不出该怎么做-有人可以帮忙吗?
这是我的柱塞:
http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview
最佳答案
如果要运行一些自定义过滤器逻辑,则可以创建一个函数,该函数将数组元素作为参数,并根据是否应在搜索结果中返回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:
...
<article data-ng-repeat="result in results | filter:search | filter:filterFn" class="result">
...
如您所见,您可以将许多过滤器链接在一起,因此添加自定义过滤器函数不会强制您使用
search
对象删除先前的过滤器(它们将无缝协作)。