71

私は 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 項目を評価します。ただし、構文に関しては、どうすればよいかわかりません-誰か助けてくれますか?

これが私のプランカーです: http://plnkr.co/edit/lNJNYagMC2rszbSOF95k?p=preview

4

4 に答える 4

168

いくつかのカスタム フィルター ロジックを実行する場合は、配列要素を引数として取り、それが検索結果に含まれるかどうかに基づいてtrueorを返す関数を作成できます。次に、オブジェクトの場合と同じようfalseに命令に渡します。次に例を示します。filtersearch

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オブジェクトを使用して以前のフィルターを強制的に削除する必要はありません (それらはシームレスに連携します)。

于 2013-05-15T11:32:59.883 に答える
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

于 2013-05-15T11:33:06.850 に答える
6

同じ ng-repeat フィルターで複数の関数フィルターを呼び出すことができます

<article data-ng-repeat="result in results | filter:search() | filter:filterFn()" class="result">
于 2014-06-11T17:56:29.197 に答える
2

これを修正する最も簡単な方法の 1 つは、$すべてを検索する を使用することです。

これが機能していることを示すプランカーです。チェックボックスをラジオに変更しました（補完する必要があると思ったため）..

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

（一般的な検索を行う代わりに）これを行うための非常に具体的な方法が必要な場合は、検索で関数を操作する必要があります。

ドキュメントはこちら

http://docs.angularjs.org/api/ng.filter:フィルター

于 2013-05-15T11:26:56.590 に答える