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

问题描述

我是一个 AngularJS 新手，我正在构建一个小型的概念验证汽车租赁列表应用程序，该应用程序提取一些 JSON 并通过 ng-repeat 呈现该数据的各种位，并带有几个过滤器:

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-repeat 中的项目并只返回满足特定条件的项目 - 例如，我可能会根据哪个值创建一个值数组提供者的复选框被选中，然后根据它评估每个 ng-repeat 项目.就语法而言，我只是不知道该怎么做 - 任何人都可以帮忙吗?

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:http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview

Here's my Plunker: http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview

推荐答案

如果您想运行一些自定义过滤器逻辑，您可以创建一个函数，该函数将数组元素作为参数并返回 true 或false 基于它是否应该出现在搜索结果中.然后将其传递给 filter 指令，就像您对 search 对象所做的一样，例如:

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

如您所见，您可以将多个过滤器链接在一起，因此添加您的自定义过滤器函数不会强制您使用 search 对象移除之前的过滤器(它们将无缝协同工作).

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屋！