AngularJS use class in div depending var value

Issue

I'm new in AngularJS (1.6). I have this code:

<div class="modal-header primary-color">

I need to use two class (primary-color and secondary-color) depending on the value of a var called vm.state

I some parts of the code, different divs are rendered according to:

ng-if="vm.state == vm.states[2]"

So I'm trying to use that in order to decide which class use in the div. My idea is something like this:

<div class="modal-header" ng-if="vm.state == vm.states[2]" add the class primary-color, in other case add secondary-color>

How can I do it?

edit: I'm trying this:

<div ng-class="{true:'modal-header primary-color', false:'modal-header secondary-color'}[vm.state == vm.states[2]]">

Solution

Use ng-class like this:

<div ng-class="{'primary-color': vm.state == vm.states[2], 'secondary-color': vm.state != vm.states[2]}">

If modal-header class is common you can put it in class:

<div class="modal-header" ng-class="{'primary-color': vm.state == vm.states[2], 'secondary-color': vm.state != vm.states[2]}">

Answered By - Bill P