Как объединить эти 2 заявления класса нг?

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>

На данный момент первый ng-class переопределяет 2-й ng-class Я имею. Как бы вы объединили оба из них, чтобы я получил некоторый синий класс, а также тип направления?

Answer 1

Цепь их вместе, как вы сделали с первым.

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

Это не остановит оценку, поэтому вы можете иметь несколько классов.

Вот еще один SO пост о добавлении нескольких классов с ng-class,

Answer 2

Вы можете использовать массив и сделать выражение более кратким и читабельным:

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

Вам просто нужно позаботиться о том, чтобы "застойный" класс устанавливался через css (или сделать [{0:'blue1', 1:'blue2', 2:'blue3'}[k], v.direction === 'stagnant' ? '' : v.direction]). ng-class является гибким, что вы также можете использовать массив выражений или строк. В этом случае первое значение в массиве является литералом объекта {0:'blue1', 1:'blue2', 2:'blue3'}[k] в скобках для вычисления значения из массива на основе ключа, переданного k и второе значение массива является v.direction сам.

демонстрация

.blue1 {
  color: blue;
}
.blue2 {
  color: green;
}
.blue1 {
  color: red;
}
.negative {
  background-color: #ccc;
}
.positive {
  background-color: #123;
}
.stagnant {
  background-color: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app ng-init="k=1;v.direction='positive'">
  <div class="tag" ng-class="[{0:'blue1', 1:'blue2', 2:'blue3'}[k], v.direction]">Term</div>

</div>

Иногда общее правило большого пальца заключается в том, что когда у вас более длинное выражение, оно не должно быть в представлении, а должно быть в контроллере. Таким образом, вы могли бы также создать функцию контроллера и вернуть ожидаемые классы как литерал объекта и связать функцию с ng-классом.