Show elements containing a certain css class using angularjs filter

Question

I have an angularjs app. I have a checkbox in my html :

<input ng-true-value="Paused" ng-model="paused" type="checkbox">Show Paused

When I click this checkbox it should only display the elements having the class='paused'. for eg let's say this is my view:

<span class="paused">1</span>
<span class="notpaused">2</span>
<span class="notpaused">3</span>

So when I click on Show Paused I want that only the <span> with class="paused" be visible in the view. other elements should be hidden from the view. I know how to use filters in angularjs but I'm not able to figure out how to do it when we have to filter by class name. Any suggestions on how can I do it?

Akshay Pamnani · Accepted Answer · 2018-11-22 07:13:10Z

1

If you are changing the value of pause variable using your ng-model, it will give result as true or false.

so, you can use it like

    <span ng-if="paused">1</span>
    <span ng-if="!paused">2</span>
    <span ng-if="!paused">3</span>

or with your logic.

answered Nov 22, 2018 at 7:13

Akshay Pamnani

215 bronze badges

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

Comments

node_man · Accepted Answer · 2018-11-22 10:54:49Z

I got it to work like this :

<input ng-true-value="'Paused'"  ng-false-value="''" ng-model="paused" 
type="checkbox">Show Paused

<div ng-repeat="x in users|filter:paused" >

//tip for beginners > ng-class="{'paused': x.stat == 'Paused',
'notpaused': x.stat == 'notPaused'}" assigns the class paused/notpaused 
and {{x.id}} prints the value 1.

<span class="paused">1</span> 

<span class="notpaused">2</span>
<span class="notpaused">3</span>
</div>

Earlier when I used to set ng-true-value="Paused" it would always return true hence my filter was not working as the value of ng-model="paused" would evaluate to true/false instead of Paused when the checkbox is checked. But when I included the single quotes like this : ng-true-value="'Paused'" , my filter is now working perfectly. Hope this helps somebody

Collectives™ on Stack Overflow

Show elements containing a certain css class using angularjs filter

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related