在angularjs中按多种尺寸过滤产品

Question

我目前正在使用返回对象的PHP CRUD API构建应用程序 - 然后使用angularJS作为我选择的框架。

我在筛选具有多种尺寸的产品的最佳方式时遇到了一些麻烦，但过滤单个属性并不是问题。

我在一个单独的MySQL表上有大小，并将它们外键键入一个唯一的ID，将它们连接到产品中，下面是我要尝试过滤的API返回的示例：

key

接下来，这是我试图计算唯一大小值的检查，但我在迭代'尺寸'时遇到了麻烦

 "id":"1",
         "affiliate_id":"3443739433",
         "product_sku":"3443739433",
         "sizes":[  
            {  
               "id":"1076",
               "affiliate_id_options":"3443739433",
               "size":"10"
            },
            {  
               "id":"1077",
               "affiliate_id_options":"3443739433",
               "size":"12"
            },
            {  
               "id":"1078",
               "affiliate_id_options":"3443739433",
               "size":"14"
            },
            {  
               "id":"1079",
               "affiliate_id_options":"3443739433",
               "size":"16"
            },
            {  
               "id":"1080",
               "affiliate_id_options":"3443739433",
               "size":"18"
            },
            {  
               "id":"1081",
               "affiliate_id_options":"3443739433",
               "size":"20"
            }
         ],
         "product_name":"Product name 1",         
         "product_colours":"Red",

我原型的jsfiddle：http://jsfiddle.net/zgdd4ozv/9/

Answer 1

你的小提琴有几个问题：

1。您有嵌套列表，但您的uniqueItems函数仅处理平面列表。

为了解决这个问题，您有两种可能性：

一个。创建一个帮助函数（例如uniqueSizes），您可以从中为您的products数组中的每个uniqueItems列表调用products.sizes函数。这将是针对您当前数据结构的高度定制的解决方案。但是，如果您的数据结构发生变化，您将不得不调整您的功能。

湾更改uniqueItems函数以处理嵌套表示（列表和对象）。因此，只要您的数据结构发生变化，您就必须提供数据值的路径。

Here是你的小提琴，它可以处理嵌套列表和对象的通用uniqueItems函数。要从嵌套对象中提取唯一项，请提供以下字符串作为关键参数：path.to.your.values，其中每个单词都是嵌套对象上的属性。

如果您有嵌套列表，请使用prop[]表单提供密钥。例如，要获取尺寸的唯一商品，请拨打以下电话：uniqueItems($scope.products, 'sizes[].size')

sizes[]部分告诉sizes属性的值是一个数组，所以函数到达sizes数组并以sizes数组作为data参数递归调用自身

2。您可以根据平面对象列表

过滤尺寸

在您的控制器中，进行if (i == p.sizes)检查，从而将实际尺寸i与产品的整个sizes数组进行比较。您可以按照以下尺寸更改过滤：

$scope.products.forEach(function(product) {
  for (var i in $scope.useSizes) {
    if ($scope.useSizes[i]) {
      $scope.selected = true;
      product.sizes.forEach(function (s) {
        if (i == s.size) {
          filterAfterSizes.push(product);
        }
      });
    }
  }     
});

在上面的小提琴中也有这个功能，你可以检查它是如何工作的。

3。您的特定产品发生次数的计数器已被破坏

它没有正确计算尺寸侧面菜单中的产品。我建议根据您的尺寸的嵌套结构创建一个angular filter进行过滤。请注意，在上面的小提示中，出现次数（<span class="filterCount">({{(filteredProducts | filter:size).length}})</span>代码）的计数不能正常工作，但如果您检查特定大小，产品将被正确过滤掉。

就是这样。祝你好运！