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

Casao · Accepted Answer · 2014-04-30 15:09:07Z

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

edited Apr 30, 2014 at 15:09

answered Apr 30, 2014 at 14:47

Casao

5422 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

drewisthe Over a year ago

Right, but I'd like to have a filter for each "view". So it doesn't hide the view, but the person in general.

Casao Over a year ago

Gotcha. That is a bit trickier -- you'll need to write a custom filter that iterates over the array inside. It's not something you can avoid with base AngularJS

Casao Over a year ago

I've updated with the general outline of a custom filter to do what you want. Update the $scope.searchName with the search term. You could also create an array for $scope.searchName and update the function to iterate through it.

Collectives™ on Stack Overflow

Angular - Filter based on nested array boolean

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related