2

私は AngularJS の初心者で、上司のために非常に基本的な概念実証をまとめています。これはレンタカーのリストで、ビューのメイン領域に結果リストが外部 JSON を介して取り込まれ、その下にフィルター パネルがあります。ここで作成したプランカーを確認できます。

http://plnkr.co/lNJNYagMC2rszbSOF95k

ngRepeat で子オブジェクト/値を正常に参照できました。

  <article data-ng-repeat="result in results | filter:search" class="result">
    <h3>{{result.carType.name}}, {{result.carDetails.doors}} door, &pound;{{result.price.value}} - {{ result.company.name }}</h3>
    <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>

...しかし、これまでのところ、検索フィルターで第 2 レベルの子オブジェクトにアクセスできませんでした。したがって、たとえば、「車の種類」(以下を参照) でフィルタリングしている場合、「search.carType.name」を ngModel としてできるだけ具体的に使用できるようにしたいと考えていますが、これはできません。 「search.carType」を使用するだけで問題なく動作しますが、動作しません。誰かが私が間違っていることについてアドバイスできますか?

<h4>Car type:</h4>
    Compact <input type="checkbox" data-ng-model="search.carType" ng-true-value="Compact" ng-false-value="" /><br>
    Intermediate <input type="checkbox" data-ng-model="search.carType" ng-true-value="Intermediate" ng-false-value="" /><br>
    Premium <input type="checkbox" data-ng-model="search.carType" ng-true-value="Premium" ng-false-value="" /><br>
4

2 に答える 2

3

検索オブジェクトは正しく取り込まれていますが、フィルターは期待どおりにそれを消費していません。フィルターの実装 ( https://github.com/angular/angular.js/blob/master/src/ng/filter/filter.js ) を見ると、子プロパティの 1 層だけが深くなるように見えます。フィルター定義としてオブジェクトが与えられます。

Ajay の提案は機能しますが、他のパラメーターに対応するために追加のフィルターをチェーンする必要があります。車のタイプと会社の両方を変更して、ng-model で x.name を指定し、フィルターを に変更できます filter:search.carType.name|filter:search.company.name。パラメーターの種類が少ない場合は、この方法で処理します。

一方、あなたの現在のアプローチの良いところは、それが透過的であることです。パラメーターの数が他の場所で変更された場合、フィルター呼び出しを変更する必要はありません。それらの数が比較的多い場合、またはそれらが動的である場合は、よりスケーラブルなアプローチを採用します。検索オブジェクトを消費するフィルター FUNCTION を作成し、子をフィルター処理されたデータと比較する際に 1 レベル以上の深さまで進みます。

于 2013-05-10T16:14:45.127 に答える