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

【问题标题】：Show elements containing a certain css class using angularjs filter使用 angularjs 过滤器显示包含某个 css 类的元素
【发布时间】：2019-04-24 19:33:42
【问题描述】：

我有一个 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>

因此，当我单击 Show Paused 时，我希望只有 <span> 和 class="paused" 在视图中可见。其他元素应该从视图中隐藏。我知道如何在 angularjs 中使用过滤器，但是当我们必须按类名过滤时，我不知道该怎么做。关于我该怎么做的任何建议？

【问题讨论】：

标签： javascript jquery html css angularjs

【解决方案1】：

如果您正在使用 ng-model 更改 pause 变量的值，它将给出结果为真或假。

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

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

或者你的逻辑。

【讨论】：

【解决方案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，而不是在选中复选框时暂停。但是当我包含这样的单引号时：ng-true-value="'Paused'"，我的过滤器现在可以正常工作了。希望这可以帮助某人

【讨论】：