Показать элементы, содержащие определенный класс CSS, используя фильтр angularjs

Question

У меня есть приложение angularjs.У меня есть флажок в моем html:

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

Когда я нажимаю этот флажок, он должен отображать только элементы, имеющие class='paused'.например, скажем, это мой взгляд:

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

Так что, когда я нажимаю на Показать приостановлено, я хочу, чтобы только <span> с class="paused" было видно в представлении.другие элементы должны быть скрыты от глаз.Я знаю, как использовать фильтры в angularjs, но я не могу понять, как это сделать, когда мы должны фильтровать по имени класса.Любые предложения о том, как я могу это сделать?

Answer 1

Я заставил его работать так:

<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>

Раньше, когда я устанавливал ng-true-value="Paused", оно всегда возвращало бы true, следовательно, мой фильтр не работал, так как значение ng-model="paused" оценивалось бы какtrue/false вместо Приостановлено, когда установлен флажок.Но когда я включил одинарные кавычки так: ng-true-value="'Paused'", мой фильтр теперь работает отлично.Надеюсь, это кому-нибудь поможет

Answer 2

Если вы изменяете значение переменной pause, используя вашу ng-модель, она даст результат как true или false.

, поэтому вы можете использовать его как

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

илис вашей логикой.