title: AngularJS - complex filtering based on categories etc
body: <p>I've done some google-fu but all I can find about AngularJS filters is simple examples about simple filters (mostly on a single field's value). </p>
  
  <p>What I'm after thoguh is somewhat more complex, and I kinda look for help on how to tackle my situation.</p>
  
  <p>Imagine you have an array of the following JSON objects:</p>
  
  <pre><code>{
      "id":"1",
      "title":"Title",
      "categories":[
          {"id":"14","name":"DIY"}
      ],
      "topics":[
          {"id":"12","name":"Junk Food"}
      ]
  },
  {
      "id":"2",
      "title":"Title 2",
      "categories":[
          {"id":"4","name":"Test"},
          {"id":"14","name":"DIY"},
      ],
      "topics":[
          {"id":"2","name":"Food"}
      ]
  }
  
  [...]
  </code></pre>
  
  <p>so basically each object can have ANY number of "categories" and / or "topics".</p>
  
  <p>Now, my goal is to create a frontend interface that allows me to cumulatively apply various kinds of filters to those JSON objects. </p>
  
  <p>For example, I'd like to say: show only the entries that have category.id = 14 AND topic.id = 2 [etc] and still support deep-linking for the filtered results.</p>
  
  <p>So here's where I'm stuck:</p>
  
  <p>1) what's the best way to use routes for this (ie how would you structure the URLs to support ANY number of filter (based on different values) </p>
  
  <p>2) how should i keep track of the filters added? (ie, how many and which filters have been selected by the user) </p>
  
  <p>Looking at the documentation for the <a href="http://docs.angularjs.org/api/ng.filter:filter" rel="noreferrer">AngularJS filters</a> I'll obviously use the 2nd example for the filtering parameter:</p>
  
  <blockquote>
    <p>Object: A pattern object can be used to filter specific properties on objects contained by array. For example {name:"M", phone:"1"} predicate will return an array of items which have property name containing "M" and property phone containing "1". A special property name $ can be used (as in {$:"text"}) to accept a match against any property of the object. That's equivalent to the simple substring match with a string as described above.</p>
  </blockquote>
  
  <p>But I'm not so sure on how to make sure i'm checking the right field (ie topic.id for topics vs category.id for categories)...</p>
  
  <p>Simply put, I'd love to see an example for such a less-trivial filtering scenario.</p>