How to combine these 2 ng-class statements?

Question

<ul>
    <li ng-repeat="(k, v) in chartTags track by k" class="blue-tag">
        <div class="tag"
             ng-class="{blue1: k == 0 , blue2: k == 1 , blue3: k == 2 }"
             ng-class="{'positive': v.direction == 'positive',
                        'negative': v.direction == 'negative',
                        ''        : v.direction == 'stagnant'}">{{v.term}}</div>
    </li>
</ul>

Currently the first ng-class overrides the 2nd ng-class I have. How would you combine both of these, so that I get a blue class of some sort, as well as a direction type?

Answer 1

Chain them together as you did with the first one.

<div class="tag" ng-class="{blue1: k == 0 , blue2: k == 1 , blue3: k == 2, 'positive': v.direction == 'positive',
                    'negative': v.direction == 'negative',
                    '' : v.direction == 'stagnant'}">
</div>

It won't stop evaluating so you can have multiple classes.

Here is another SO post about adding multiple classes with ng-class.