AngularJS используйте класс в div в зависимости от значения var

Question

Я новичок в AngularJS (1.6). У меня есть этот код:

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

Мне нужно использовать два класса (основной цвет и дополнительный цвет) в зависимости от значения переменной, называемой vm.state

I некоторые части код, различные div отображаются в соответствии с:

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

Так что я пытаюсь использовать это для того, чтобы решить, какой класс использовать в div. Моя идея примерно такая:

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

Как я могу это сделать?

редактировать: я пытаюсь это:

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

Answer 1

Используйте ng-class следующим образом:

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

Если класс modal-header является общим, вы можете поместить его в класс:

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