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>

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

Answer 1

如果您使用ng-model更改pause变量的值，则结果将为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而不是暂停。但是，当我使用单引号这样的ng-true-value="'Paused'"时，我的过滤器现在可以正常工作了。希望这对某人有帮助

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

2 个答案: