AngularJS：自定义过滤器和ng-repeat

发布时间：2020-12-17 08:59:13 所属栏目：安全来源：网络整理

导读：我是一个AngularJS的新手，我正在建立一个小概念车租赁列表应用程序，拉入一些JSON，并通过ng重复，通过几个过滤器呈现各种位的数据： article data-ng-repeat="result in results | filter:search" class="result" headerh3{{result.carType.name}},{{resul

我是一个AngularJS的新手，我正在建立一个小概念车租赁列表应用程序，拉入一些JSON，并通过ng重复，通过几个过滤器呈现各种位的数据：

<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项目。我只是不能解决我怎么做，虽然，在语法方面 – 谁能帮助？

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

如果要运行一些自定义过滤器逻辑，您可以创建一个函数，它将数组元素作为参数，并根据它是否应该在搜索结果中返回true或false。然后将其传递给过滤器指令，就像对搜索对象一样，例如：

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

正如你可以看到，你可以链接许多过滤器在一起，所以添加自定义过滤器功能不强迫你删除以前的过滤器使用搜索对象(他们将无缝协同工作)。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!