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


70

我是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中的项目,并仅返回满足特定条件的项目-例如,我可以根据哪个“ provider”复选框创建值数组被选中,然后评估每个ng-repeat项目。就语法而言,我只是想不出该怎么做-有人可以帮忙吗?

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


Answers:


165

如果要运行一些自定义过滤器逻辑,则可以创建一个函数,该函数将数组元素作为参数,并根据是否应该在搜索结果中返回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对象删除以前的过滤器(它们将无缝协作)。


15
很有意思!过滤器可以简化为return car.carDetails.doors > 2;
sp00m 2014年

14
当然可以。但是,我决定提供一个更详细的版本,以使其更清楚地作为学习示例。
mirrormx 2014年

2
如果您需要更复杂的过滤器,则还可以向过滤器传递多个参数
nh2 2014年

@mirrimx我什么时候得到这个函数没有得到?
anam 2014年

2
我喜欢return (car.carDetails.doors > 2);
Daniel

34

如果仍然需要自定义过滤器,则可以将搜索模型传递给过滤器:

<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


4
您可以为自定义过滤器指定多个参数吗?
文森特


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.