angularjs - 如何在 ng-class 指令中设置带和不带表达式的乘法规则？

Question

我正在尝试使用调用的指令ng-class从 CSS 文件中设置乘法规则。这是代码的一部分

<div class="filterToggleBtn thumbnail" 
        ng-class="{ filterToggleBtnSide notificationColor:notificationState }">
</div>

变量filterToggleBtnSide和notificationColor包含 CSS 规则名称的字符串。

变量notificationState集true或false.

问题的关键是-我如何始终使用filterToggleBtnSiderule ，notificationColor只有这样notificationState才是真的。

我试图在下面制作类似的代码

<div class="filterToggleBtn thumbnail" 
        ng-class="{ filterToggleBtnSide && notificationColor:notificationState }">
</div>

<div class="filterToggleBtn thumbnail" 
        ng-class="{ filterToggleBtnSide, notificationColor:notificationState }">
</div>

<div class="filterToggleBtn thumbnail" 
        ng-class="{ filterToggleBtnSide:true, notificationColor:notificationState }">
</div>

在最后一个示例中，只有第二个表达式有效。如果有人帮助，我将不胜感激；D 谢谢

Answer 1

假设

$scope.filterToggleBtnSide = "class1";
$scope.notificationColor = "class2";

你可以这样做：

<div class="filterToggleBtn thumbnail class1" 
ng-class="{class2:notificationState }"></div>
<!-- or this -->
<div class="filterToggleBtn thumbnail" 
ng-class="{class1: true, class2: notificationState}"></div>
<!-- or this -->
<div class="filterToggleBtn thumbnail class1
{{notificationstate && notificationColor}}"></div>
<!-- or this -->
<div class="filterToggleBtn thumbnail class1
{{notificationstate && 'class2'}}"></div>
<!-- or this -->
<div class="filterToggleBtn thumbnail 
{{filterToggleBtnSide}} {{notificationstate && notificationColor}}"></div>
<!-- or this -->
<div class="filterToggleBtn thumbnail 
{{filterToggleBtnSide}} {{notificationstate && 'class2'}}"></div>