使用angularjs过滤器显示包含某个css类的元素

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

如果您使用ng模型更改暂停变量的值，它将给出true或false的结果。

所以，你可以像一样使用它

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

或者你的逻辑。

Answer 2

我让它像这样工作：

<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，而不是Paused。但是，当我包含这样的单引号：ng-true-value="'Paused'"时，我的过滤器现在工作得很好。希望这能帮助