2012-11-09 17 views
5

私はいくつかのgoogle-fuをやったことがありますが、AngularJSフィルタについては、単純なフィルタ(ほとんどの場合、単一フィールドの値)に関する簡単な例です。AngularJS - カテゴリに基づく複雑なフィルタリング

私がthoguhをやった後のことはやや複雑で、自分の状況にどう対処するのかちょっと助けを求めます。

では、次のJSONオブジェクトの配列を持っている想像:

{ 
    "id":"1", 
    "title":"Title", 
    "categories":[ 
     {"id":"14","name":"DIY"} 
    ], 
    "topics":[ 
     {"id":"12","name":"Junk Food"} 
    ] 
}, 
{ 
    "id":"2", 
    "title":"Title 2", 
    "categories":[ 
     {"id":"4","name":"Test"}, 
     {"id":"14","name":"DIY"}, 
    ], 
    "topics":[ 
     {"id":"2","name":"Food"} 
    ] 
} 

[...] 

ので、基本的には、各オブジェクトは、「カテゴリ」および/または「トピック」の数に制限はありません。

私の目標は、JSONオブジェクトにさまざまな種類のフィルタを累積的に適用できるフロントエンドインターフェイスを作成することです。

たとえば、category.id = 14 AND topic.id = 2 [etc]を持つエントリのみを表示し、フィルタリングされた結果のディープリンクをサポートしています。

私がこだわっているところだからここにあります:

1)

(すなわち、どのように異なる値に基づいてフィルタの任意の数を(サポートするためのURLを構築します)このためにルートを使用するための最良の方法です何

2)追加されたフィルタをどのように追跡する必要がありますか?

オブジェクト::パターンオブジェクト(すなわち、フィルタがユーザによって選択されているどのように多くのとする)AngularJS filtersのドキュメントを見てみると

私は明らかにフィルタリングパラメータのための第二の例を使用します配列に含まれるオブジェクトの特定のプロパティをフィルタリングするために使用できます。たとえば、{name: "M"、phone: "1"}述部は、プロパティ名に "M"が含まれ、プロパティphoneに "1"を含む項目の配列を返します。特別なプロパティ名$は({$: "text"}のように)オブジェクトの任意のプロパティとの一致を受け入れるために使用できます。これは、上で説明した文字列との単純な部分文字列の一致に相当します。

しかし、私は私が右のフィールド(カテゴリのcategory.id対トピックについてすなわちtopic.id)をチェックしてることを確認する方法についてはそれほどよく分からない...

簡単に言えば、Iそのような軽度のフィルタリングシナリオの例を見るのが大好きです。

+0

現在、フィルタは、内部を通過するサポートしていませんHTMLの一部は次のように見ることができ

var module = angular.module('app', []); module.filter("property", ["$filter", function($filter){ var parseString = function(input){ return input.split("."); } function getValue(element, propertyArray) { var value = element; angular.forEach(propertyArray, function(property) { value = value[property]; }); return value; } return function (array, propertyString, target) { var properties = parseString(propertyString); return $filter('filter')(array, function(item){ return getValue(item, properties) == target; }); } }]); 

をあなたが望むような配列。独自のカスタムフィルタを作成する必要があります。 –

答えて

3

代わりにthisのようなものが必要だと思います。彼の「他の簡単な選択肢」を参照してください。私は私のコントローラに注入されたサービスで複雑なフィルタリングを行い、フィルターされたリストを自分の$ scopeにViewに公開します。比較的単純な作業には角度フィルターしか使用しません。

Re:このURLをURLに公開する方法については、これらのフィルタを文字列として表現する方法が必要であり、$ locationと$ routeParamsを使用してコントローラに入力する必要があります。

+0

リンクありがとう! –

2

カスタムフィルタ書く場合、これは動作することができます:

<ul>   
    <li ng-repeat="data in items | property:'categories.id':<id_of_a_category_we_want>"> 
     {{ data }} 
    </li> 
</ul> 

はクレジット:OnOFF-Switch blog