3

我一直在尝试学习 AngularJS 来为电子商务网站制作新概念和设计的原型。我目前正在尝试创建一个产品搜索页面，其中包含一系列基于不同产品属性的过滤器。

最初，过滤器组将包括：

  • 品牌（单字符串值）
  • 类别（带有 id 和字符串的数组）
  • 标签（具有零个或多个值的数组，最多 5 个）
  • 标注（具有零个或多个值的数组，最多 5 个）

然而，这可能会改变，理想情况下，解决方案将被抽象为允许列出和过滤新组，而无需完全重写控制器。

每个过滤器集中的值将在侧边栏中作为复选框列出，并进行重复数据删除以仅显示唯一值，并且理想情况下还计算每个过滤器中有多少产品。

我开始使用Filter Array Using Checkboxes with AngularJS中的一些代码，但是它似乎没有可扩展性，因为它具有各种不同的方面/过滤器组，并且不适用于数组中的值。

有没有办法将此解决方案抽象为两个不同的服务？例如

  • 列出过滤器可用值的服务
  • 一个自定义过滤器，它将接受要过滤的属性和值，您可以使用它来添加该自定义过滤器的多个实例。

我目前的主要障碍是找到一种实用的方法来遍历数组并只显示唯一值，同时获得正确的计数。我试图通过手动列出过滤器选项来作弊，但无法让计数起作用。理想情况下，我正在寻找一种从 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/

任何帮助，将不胜感激。

4

0 回答 0