How to set multiply rules with and without expression in ng-class directive?

Question

I'm trying to use directive called ng-class to set multiply rules from CSS file. Here is a part of code

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

Variables filterToggleBtnSide and notificationColor contains a string names of CSS rules.

Variable notificationState sets true or false.

The point of question is - How I can always use filterToggleBtnSide rule , and notificationColor only then notificationState is true.

I was trying to make like code below

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

In last sample only second expression is working. I will be very appreciated if somebody help ;D Thanks

Answer 1

Assuming

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

You can do something like this:

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