CODEWITHSUNDEEP
angularjs
RustyDev
RustyDev

Reputation: 1122

Filter a list of products with multiple selections

I'm building a product filter similar to Amazon and can't seem to get multiple filters working perfectly. The goal is combine filters to only show products that meet the chosen filters.

Here's the filtering I have currently:

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

Here's a semi-working example:

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

Ideally, The checkboxes would be enabled only if the filtered list contains those options.

Thank you!

Upvotes: 0

Views: 432

Answers (1)

Iamisti
Iamisti

Reputation: 1710

Just run a function on the collection which can get the values based on the options that a product has. Do you need a sample?

Solution:

instead of:

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

do:

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

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

Explanation: if your filter doesn't mach any data, you should not show your products. You should hide them instead.

Upvotes: 1

Related Questions