Angular skipping a value if it has a specific key / value

Question

A bit of a strange problem here, so I will try to explain this as clearly as possible.

I have a simple ng-repeat that will show content based on what the key value is .active set to true. I let the user scroll through the contents with some arrow buttons tied to some ng clicks. This works fine, however I want to exclude one element from the array if it has the key value side = 'help' attached to it. So basically I want the arrows to click to skip this in a way. Unfortunately, I do not control where the help element is located in the array. So here are the click functions

//flip right $scope.flipRight = function(index, parent){ var idx = index + 1; if (idx >= $scope.contentHere[parent].sides.length) { idx = 0; } $scope.contentHere[parent].sides[index].active = false; $scope.contentHere[parent].sides[idx].active = true; }; //flip left $scope.flipLeft = function(index, parent){ var idx = index - 1; if (idx < 0) { idx = $scope.contentHere[parent].sides.length - 1; } $scope.contentHere[parent].sides[index].active = false; $scope.contentHere[parent].sides[idx].active = true; }; 

So basically, what I'm trying to figure out is how this logic skips an element if it has .side = 'help'. I was thinking about using lodash to _filter the array with elements that don't matter, but it will offset the index so that it doesn't work. I'm not sure how to approach this (maybe I'm thinking about it wrong?) And can use some direction.

Thanks for taking the time to read!

Answer 1

 $scope.flipRight = function(index, parent){ var idx = index + 1; if(idx >= $scope.contentHere[parent].sides.length){ idx = 0; } if($scope.contentHere[parent].sides[idx] == 'help'){ $scope.flipRight(idx, parent); //Added to skip over to next item $scope.contentHere[parent].sides[index].active = false; // Added for the first item does not turn .active to false Issue return; // Added to skip execution of following line of codes incase of recursion } $scope.contentHere[parent].sides[index].active = false; $scope.contentHere[parent].sides[idx].active = true; }; //flip left $scope.flipLeft = function(index, parent){ var idx = index - 1; if (idx < 0) { idx = $scope.contentHere[parent].sides.length - 1; } if($scope.contentHere[parent].sides[idx] == 'help'){ $scope.flipLeft(idx, parent); //Added to skip over to next item $scope.contentHere[parent].sides[index].active = false; // Added for the first item does not turn .active to false Issue return; // Added to skip execution of following line of codes incase of recursion } $scope.contentHere[parent].sides[index].active = false; $scope.contentHere[parent].sides[idx].active = true; };