Как назначить альтернативный класс строкам в Angular JS?

Я хочу назначить альтернативный класс строкам в таблице. Я использую ng-repeat на

<tr ng-repeat="event in events">

Я хочу получить вывод следующим образом:

<tr class="odd">...</tr>
<tr class="event">....</tr>

Я пробовал это (не работает):

<tr ng-repeat="event in events" class="$index % 2 == 0? 'event' : 'odd'">

Я не могу заставить его работать. Также кажется, что Angular использует атрибут 'class'. Почему это так? Могу ли я сообщить, что AngularJS не использовать атрибут класса для внутренних оценок?

Пожалуйста, помогите. Спасибо!

Ответы

Ответ 2

Из документов Angular.

Используйте ng-class-odd ng-class-even

<li ng-repeat="name in names">
  <span ng-class-odd="'odd'" ng-class-even="'even'">
    {{name}}
  </span>
</li>

Ответ 3

Поскольку @ganaraj утверждает, что ng-class-odd и ng-class-even - правильный способ сделать это, но в интересах поисковиков ваше первоначальное предложение не за горами работало в Angular >= 1.2. 19.

Вот приблизительный пример того, что сработало бы и будет работать, если раскрасить больше, чем чередующиеся строки (например, каждые 3 строки):

<div>
<style>
    .color0 {
        background-color: lightblue;
    }

    .color1 {
        background-color: lightyellow;
    }

    .color2 {
        background-color: lightgray;
    }
</style>


<div ng-repeat="result in results" ng-class="'color' + ($index % 3)">
    <div>
        <p>{{result.myText}}</p>
    </div>
</div>

Ответ 4

Вы также можете использовать директивы ng-class-odd и ng-class-even непосредственно в директиве ng-repeat.

<div class="cssOneProductRecord" 
   ng-repeat='..' 
   ng-class-odd="'cssProductOdd'" 
   ng-class-even="'cssProductEven'" >

Что дает нам приятные переменные классы для каждой строки:

enter image description here

Этот пример приведен на следующей странице, в котором также показано, как превратить данные JSON в дружественную, отзывчивую страницу Master-View:

Мастер-представления с использованием AngularJS

enter image description here

Ответ 5

Улучшение ответа Финтана Керни,

От: https://docs.angularjs.org/api/ng/directive/ngClassOdd

style.css

.odd {
  color: red;
}
.even {
  color: blue;
}

index.html

<ol ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
  <li ng-repeat="name in names">
   <span ng-class-odd="'odd'" ng-class-even="'even'">
     {{name}}
   </span>
  </li>
</ol>