AngularJS：自定义过滤器和重复(AngularJS : Custom filters and

我是一个新手，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-重复的项目，只返回符合特定标准的项目 - 例如，我可能会在此基础上“供应商”复选框创建值的数组被检查，然后评估对每个NG重复项目。 我只是想不通，我怎么会做，虽然，在语法方面 - 谁能帮助？

这里是我的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:

你可以调用更多的功能1个过滤器在同一NG重复过滤器

<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

文章来源: AngularJS : Custom filters and ng-repeat