Angular - Filter based on nested array boolean

Question

I'm trying to find a good way to filter on click, based on a boolean value that's within a nested array.

My current scope looks like the following

$scope.persons = [
   { 
     firstName : 'Drew',
     lastName : 'Minns',
     views : [
       {
         name : 'View 1',
         support : true
       },
       {
         name : 'View 2',
         support : false
       }
     ],
   },
   { 
     firstName : 'Peter',
     lastName : 'Parker',
     views : [
       {
         name : 'View 1',
         support : false
       },
       {
         name : 'View 2',
         support : false
       }
     ],
   }
  ];

I'm looking to add a filter that sorts based on the boolean value of each view object. The problem that I'm running into is that I can't access that value without iterating over every array. Doing that is making it tough to access each individual value without referencing the array number.

I want to hide the parent object based on whether or not the specific "view" object has a true or false in the support field.

Again, I'm looking to do this on click, so the idea is that you click a button for 'View 1' and only those parent objects with true value for support shows up. There will be multiple buttons for each "view" so I'm looking to provide the action of drilling down based on support for views.

Here's a plunkr http://plnkr.co/edit/ipi8vKEbxps2H89HTg00?p=preview

Answer 1

You can use Angular JS's "Filter" function to do this. Plunkr example, with the relevant change below

http://plnkr.co/edit/LHTpRqHbTxEAslY0rd5J?p=preview

<ul ng-repeat="view in person.views | filter:{ support: true }">

Edit: For what you want, I've slapped together a quick custom filter: http://plnkr.co/edit/LHTpRqHbTxEAslY0rd5J?p=preview