Угловая: фильтрация нескольких элементов из массива

Question

Я создаю приложение, в котором вы можете фильтровать элементы, нажимая на кнопки категорий. Большинство элементов имеют несколько категорий. При нажатии на кнопки категории я создаю массив с нажатыми категориями.

Каждый элемент для фильтрации имеет массив для категорий, к которым он принадлежит. Пример:

Пункт 1 - категория: животное, коричневый, хвост

Пункт 2 - категория: животные, белая

Пункт 3 - категория: человек, высокая

При нажатии на категория кнопок «животное», он показывает только пункты 1 и 2, затем, когда я нажимаю на коричневый цвет, он показывает только пункт 1. Когда я снимаю выделение всех предметов и нажимаю в этом порядке - животное, хвост. Он ничего не показывает:/

Я просмотрел некоторые подобные темы, но не нашел надежного способа сделать это.

Возможно ли вообще это сделать без создания специального фильтра?

Answer 1

Если вы передумали добавить «настраиваемый фильтр», вот что должно работать.

angular.module('myApp').filter('matchesAll', function() { 
    return function(items, relevant, property) { 
     if(!(relevant && relevant.length)){ 
      return items; // No categories to compare with, return everything 
     } 

     property = property || 'categories'; // By default look at categories 

     return items.filter(function(item) { 
      var itemProps = item[property]; 
      return relevant.every(function(relevantCategory){ 
       return itemProps.indexOf(relevantCategory) !== -1; 
      }); 
     }); 
    }; 
}); 

Это будет использоваться как любой ngRepeat фильтр:

ng-repeat="item in items | matchesAll:selectedCategories" 

JSFiddle демонстрирующего его: http://jsfiddle.net/3an5wr0b/