AngularJS:自定义filter和ng-repeat

我是一个AngularJS新手,我正在构build一个小概念validation汽车租赁列表应用程序,该应用程序将引入一些JSON,并通过ng-repeat显示各种数据位,并带有一些filter:

<article data-ng-repeat="result in results | filter:search" class="result"> <header><h3>{{result.carType.name}}, {{result.carDetails.doors}} door, &pound;{{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> 

现在我想在我的控制器中创build一个自定义filter,它可以遍历我的ng-repeat中的项目,并只返回满足特定条件的项目,例如,我可以创build一个基于哪个“提供者”checkbox被检查,然后评估每个ng-repeat项目。 我只是不能解决我怎么做,但在语法方面 – 任何人都可以帮忙吗?

这是我的Plunker: http ://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview

如果你想运行一些自定义的filter逻辑,你可以创build一个函数,该函数将数组元素作为参数,并根据它是否应该在search结果中返回truefalse 。 然后将它传递给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"> ... 

正如你所看到的,你可以将许多filter链接在一起,所以添加自定义filter函数并不会强迫你使用search对象删除以前的filter(它们将无缝地一起工作)。

如果您仍想要自定义filter,则可以将search模型传递给filter:

 <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; }); }; }); 

http://plnkr.co/edit/kBcUIayO8tQsTTjTA2vO?p=preview

您可以在同一个ng-repeatfilter中调用更多的1个函数filter

 <article data-ng-repeat="result in results | filter:search() | filter:filterFn()" class="result"> 

解决这个问题最简单的方法之一是使用$这是所有的search。

这是一个显示它正在工作的运动员。 我已经改变了checkbox收音机(因为我认为他们应该是互补的)..

http://plnkr.co/edit/dHzvm6hR5P8G4wPuTxoi?p=preview

如果你想要一个非常具体的方式来做这个(而不是做一个通用的search),你需要在search中使用函数。

文档在这里

http://docs.angularjs.org/api/ng.filter:filter