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

Question

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

   <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

Answer 1

如果您想运行一些自定义过滤器逻辑，您可以创建一个函数，该函数将数组元素作为参数并根据它是否应该在搜索结果中返回 true 或 false。然后将其传递给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">
...

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

Answer 2

如果您仍然需要自定义过滤器，您可以将搜索模型传递给过滤器：

<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

Answer 3

您可以在同一个 ng-repeat 过滤器中调用多个 1 个函数过滤器

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

Answer 4

解决此问题的最简单方法之一是使用$，即搜索全部。

这是一个显示它工作的 plunker。我已将复选框更改为收音机（因为我认为它们应该是互补的）..

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

如果您想要一种非常具体的方式来执行此操作（而不是进行通用搜索），您需要使用搜索中的函数。

文档在这里

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