筛选具有多项选择的产品列表

Question

我正在构建一个类似于亚马逊的产品过滤器，但似乎无法让多个过滤器完美工作。目标是组合过滤器，只显示符合所选过滤器的产品。

这是我目前的过滤：

$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();

do:

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

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

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