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-重複的項目，只返回符合特定標準的項目 - 爲例如，我可以創建一個基於哪個'provider'複選框被選中的值的數組，然後根據這個值來評估每個ng-repeat項。我只是不知道該如何做，儘管在語法方面 - 任何人都可以幫忙？

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

Answer 1

如果你想運行一些，你可以創建一個函數，它接受數組元素作爲參數，並根據是否應該返回true或false自定義過濾器的邏輯在搜索結果中。然後，它與search對象傳遞給filter指令就像你一樣，例如：

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對象刪除以前的過濾器t（他們將無縫地一起工作）。

Answer 2

一個解決這個問題是使用$這是搜索所有的最簡單方法。

這是一個顯示它正在工作的運動員。我已經改變了複選框無線電（因爲我認爲他們應該是互補的）..

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

如果你想這樣做（而不是做一個通用搜索），您需要使用的功能工作的一個非常具體的方式在搜索中。

的文檔是在這裏

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

Answer 3

如果你還是想自定義過濾器，你可以在搜索模型傳遞到過濾器：

<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 4

您可以在同一個ng-repeat過濾器中調用更多1個功能過濾器

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