过滤具有多项选择的产品列表

Question

我正在构建一个类似于 Amazon 的产品过滤器，但似乎无法让多个过滤器完美运行。目标是组合过滤器以仅显示符合所选过滤器的产品。

这是我目前的过滤：

$scope.$watch('search', function(newVal, oldVal) {

    if(newVal !== oldVal) {

        var filteredProducts = $scope.products

        if(newVal.types) {
            filteredProducts = $filter('filter')(filteredProducts, { type: newVal.types })
        }
        if(newVal.vendors) {
            filteredProducts = $filter('filter')(filteredProducts, { vendor: newVal.vendors })
        }
        if(newVal.colors) {
            filteredProducts = $filter('filter')(filteredProducts, { variants: { options: newVal.colors } })
        }

        if(filteredProducts.length) {
            $('.product').hide();
            _.each(filteredProducts, function(elm) {
                $('.product[data-id="'+elm.id+'"]').show();
            })              
        } else {
            $('.product').show();
            filteredProducts = $scope.products
        }

    }
}, true)

这是一个半工作示例：

http://codepen.io/rustydev/pen/NxpRqq/

理想情况下，仅当过滤列表包含这些选项时才会启用复选框。

谢谢！

Answer 1

只需在集合上运行一个函数，该函数可以根据产品的options 获取值。您需要样品吗？

解决方案：

代替：

$('.product').show();

做：

$('.product').hide();

http://codepen.io/iamisti/pen/WrpGRw?editors=101

说明： 如果您的过滤器没有处理任何数据，则不应显示您的产品。你应该把它们隐藏起来。