CODEWITHSUNDEEP
jqueryangularjs
ajmajmajma
ajmajmajma

Reputation: 14216

Angular, filter by boolean not in repeat object

This is sort of a strange way of going about this - but I'm wondering if this is even possible. I'm trying to trigger certain animations to fire only when they are flipped and showing. They will technically be laoded on the page always - just flipped onto their backside from a css animation, but i'd like them to fire a stagger animation when they enter the screen.

The way I'm thinking of doing this is having a filter on the repeat that right now is attached to a boolean that fires true when I want to flip the div (I use this boolean to control the flipping part already).

So I'm wondering if I can do something like this in the ng-repeat

 ng-repeat="action in widget.actions | filter:{myBoolean:true}"

For reference the boolean is just somehting stored on a click on the div that flips the content around (css animations). like

 ng-click="myBoolean =! myBoolean"

The boolean is nothing that is stored in the scope that I am repeating here - I'm wondering if I can have it filter out everything when it's false, and give everything back when it's true. I don't know if this is possible because I have only used the filter to filter stuff from within the repeat object.

Would appreciate any help on this. Thanks for reading!

Upvotes: 0

Views: 87

Answers (2)

rleffler
rleffler

Reputation: 470

You can use ng-class for this. For any element, event he repeat element you can have the css for the animation attached to a class and that class is set if it is evaluated to true. if the true/false values are more complicated you can use a filter function.

<div ng-repeat ng-repeat="action in widget.actions" ng-class="{'flip-card' : myFilterFunction(action)}"></div>

if your filter function returns true, the element gets the class, otherwise it doesn't. You can also use this to give it another class when false like 'unflip-card'. You could use the ternary operator as well 

ng-class="{'flip-card' : myFilterFunction(action)}, {'unflip-card':myFilterFunction(action)}"

It also does not have to be a function, it could be an expression such as 

ng-class="{'flip-card' : action.Id == 1}"

Upvotes: 0

Petr Averyanov
Petr Averyanov

Reputation: 9486

I guess ng-if should help u a lot:

<div ng-if="myBoolean">
<ng-repeat...
</div>

Upvotes: 0

Related Questions