私は AngularJS を学習して、e コマース サイトの新しいコンセプトとデザインのプロトタイプを作ろうとしています。現在、さまざまな製品属性に基づく一連のフィルターを使用して製品検索ページを作成しようとしています。
最初は、フィルター グループは次のもので構成されます。
- ブランド (単一文字列値)
- カテゴリ (ID と文字列の配列)
- ラベル (ゼロ以上の値を持つ配列、最大 5)
- Callouts (ゼロ以上の値を持つ配列、最大 5)
ただし、これは変更される可能性があるため、理想的にはソリューションを抽象化して、コントローラーを完全に書き直すことなく、新しいグループを一覧表示してフィルター処理できるようにする必要があります。
各フィルタ セットの値は、サイドバーにチェックボックスとしてリストされ、重複が排除されて一意の値のみが表示され、理想的にはそれぞれに含まれる製品の数もカウントされます。
Filter Array Using Checkboxes with AngularJSのコードの一部を使い始めましたが、さまざまなファセット/フィルター グループを持つという点でスケーラブルではないようで、配列内の値では機能しません。
このソリューションを 2 つの異なるサービスに抽象化する方法はありますか? 例えば
- フィルターで使用可能な値を一覧表示するサービス
- そのカスタム フィルターの複数のインスタンスを追加するために使用できる、フィルターする属性と値を受け入れるカスタム フィルター。
現時点での私の主な障害は、配列を反復処理して一意の値のみを表示すると同時に、正しいカウントを取得する実用的な方法を見つけることです。フィルター オプションを手動でリストしてごまかそうとしましたが、カウントを機能させることができませんでした。理想的には、ビューにハードコードされているよりも、JSON からフィルター値をフェッチするソリューションを探しています。
製品の JSON は次のように構成されていますが、作業が簡単になるように変更できます。
{
"Category": ["g122", "Side by Side Refrigerators"],
"Brand": "LG",
"ModelNo": "GC-P197DPSL",
"Sku": "50001129",
"Heading": "567L Side by Side Refrigerator",
"ShortDesc": "The LG 567L Side-by-Side Platinum Refrigerator with One Touch Home Bar offers a huge amount of storage capacity making it perfect for family sized homes!",
"Labels": ["New", "As Advertised"],
"Callout": ["Bonus Offer", "Sale"],
"Price": 1399,
"WasPrice": 1650,
"DeliveryTier": "4",
"Image": "50001129_62296"
},
{
"Category": ["g186", "LED TVs"],
"Brand": "LG",
"ModelNo": "55LA6620",
"Sku": "50017349",
"Heading": "55\"(139cm) FHD LED LCD 100Hz 3D Smart TV",
"ShortDesc": "The LG 55\" FHD LED LCD is a Smart TV for smart people. The LG Smart TV is a class above with dual core processor, virtual surround, LED plus and magic remote control with voice recognition.",
"Labels": ["New", "As Advertised"],
"Callout": ["Bonus Offer", "Sale"],
"Price": 1389,
"WasPrice": 1599,
"DeliveryTier": "4",
"Image": "50017349_87400"
}
これまでの私の進歩の JSfiddle ですhttp://jsfiddle.net/LifeOnLars/HWa2m/24/
どんな助けでも大歓迎です。