Отфильтровать список продуктов с несколькими вариантами выбора

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

Объяснение: если ваш фильтр не Маха каких-либо данных, вы не должны покажите свои продукты. Вместо этого вы должны скрыть их.