AngularJS：カスタムフィルタとng-repeat

Question

私はAngularJSの初心者です。私はいくつかのJSONを取得し、そのデータのさまざまなビットをngでレンダリングする小型のproof-of-concept車のレンタルリストアプリケーションを構築していますフィルタのカップルと-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リピート内の項目を反復処理し、一定の基準を満たすアイテムのみを返すことができます - のためにたとえば、「プロバイダ」のチェックボックスをオンにした値の配列を作成し、各ng-repeatアイテムをそれに対して評価します。私は文法の面でどうしたらいいのか分かりません - だれでも助けてくれますか？

はここに私のPlunkerです： http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview

Answer 1

です検索結果に表示されます。

JS：次にたとえば、searchオブジェクトとあなたが同じようfilter命令に渡し

$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 objec t（彼らはシームレスに一緒に働く）。

Answer 2

この問題を解決する最も簡単な方法の1つは、すべての検索で$を使用することです。

ここには機能することを示すプランカーがあります。 （私は彼らが相補的であるべきであると思ったので）私はラジオにチェックボックスを変更しました。..

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

は、あなたが（代わりに、一般的な検索を行うための）これを行うのは非常に具体的な方法をしたい場合は、必要な機能と連携します検索で。

ドキュメントでは、いくつかのカスタムフィルタロジックを実行したい場合は、引数として配列要素を取り、それがあるべきかどうかに基づいてtrueまたはfalseを返す関数を作成することができ、ここで

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

Answer 3

あなたはまだあなたがフィルターに検索モデルに渡すことができますカスタムフィルタが必要な場合：cartypefilterの定義は次のように見ることができ

<article data-ng-repeat="result in results | cartypefilter:search" class="result"> 

：

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