AngularJS:自定义过滤器和 ng-repeat [英] AngularJS : Custom filters and ng-repeat
问题描述
我是一个 AngularJS 新手,我正在构建一个小型的概念验证汽车租赁列表应用程序,该应用程序提取一些 JSON 并通过 ng-repeat 呈现该数据的各种位,并带有几个过滤器:
<header><h3>{{result.carType.name}}, {{result.carDetails.doors}} 门, £{{result.price.value}} - {{ result.company.name}}</h3></header><ul class="result-features">{{result.carDetails.hireDuration}} 天租用 <li data-ng-show="result.carDetails.airCon">空调</li><li data-ng-show="result.carDetails.unlimitedMileage">不限里程</li><li data-ng-show="result.carDetails.theftProtection">防盗保护</li></文章><h2>过滤器</h2><h4>门:</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></选择><h4>提供者:</h4>Atlas Choice Holiday Autos Avis <input type="checkbox" data-ng-model="search.company" ng-true-value="Avis" ng-false-value="" value="Avis"/><br>
现在我想在我的控制器中创建一个自定义过滤器,它可以迭代我的 ng-repeat 中的项目并只返回满足特定条件的项目 - 例如,我可能会根据哪个值创建一个值数组提供者的复选框被选中,然后根据它评估每个 ng-repeat 项目.就语法而言,我只是不知道该怎么做 - 任何人都可以帮忙吗?
这是我的Plunker:http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview
如果您想运行一些自定义过滤器逻辑,您可以创建一个函数,该函数将数组元素作为参数并返回 true
或false
基于它是否应该出现在搜索结果中.然后将其传递给 filter
指令,就像您对 search
对象所做的一样,例如:
JS:
$scope.filterFn = function(car){//做一些测试if(car.carDetails.doors > 2){返回真;//这将在结果中列出}返回假;//否则它不会在结果中};
HTML:
<预><代码>...<article data-ng-repeat="result in results | filter:search | filter:filterFn" class="result">...如您所见,您可以将多个过滤器链接在一起,因此添加您的自定义过滤器函数不会强制您使用 search
对象删除之前的过滤器(它们将无缝协同工作).
I'm an AngularJS newbie and I'm building up a small proof-of-concept car hire listings app that pulls in some JSON and renders out various bits of that data via an ng-repeat, with a couple of filters:
<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>
Now I want to create a custom filter in my controller, that can iterate over the items in my ng-repeat and return only the items that meet certain criteria - for example, I might create an array of values based on which 'provider' checkboxes are checked, then evaluate each ng-repeat item against that. I just can't work out how I'd do that though, in terms of the syntax - can anyone help?
Here's my Plunker: http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview
If you want to run some custom filter logic you can create a function which takes the array element as an argument and returns true
or false
based on whether it should be in the search results. Then pass it to the filter
instruction just like you do with the search
object, for example:
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">
...
As you can see you can chain many filters together, so adding your custom filter function doesn't force you to remove the previous filter using the search
object (they will work together seamlessly).
这篇关于AngularJS:自定义过滤器和 ng-repeat的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!