AngularJS：自定义过滤器和NG-重复 [英] AngularJS : Custom filters and ng-repeat

问题描述

我是一个新手AngularJS和我建立了一个小的证明了概念汽车租赁房源的应用程序，拉一些JSON和通过NG重复呈现出各种数据的，与一对夫妇的过滤器

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, &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>      

现在我要创造我的控制器中的自定义过滤器，可以遍历在我的NG-重复的项目，并返回只有符合特定标准的项目 - 例如，我可能会在此基础上创造价值的数组提供商复选框被选中，然后评估对每个NG-重复项目。我只是想不通，我怎么会做，虽然，在语法方面 - 任何人都可以帮助

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?

下面是我的Plunker：
<一href=\"http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=$p$pview\">http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=$p$pview

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">
...

正如你可以看到你可以链接许多过滤器一起，因此添加自定义过滤功能不强迫你使用搜索删除previous过滤器对象（他们将无缝地一起工作）。

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-重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！