Angular JS의 행에 대체 클래스를 할당하는 방법은 무엇입니까?

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에게 내부 평가에 클래스 속성을 사용하지 않도록 지시 할 수 있습니까?

도와주세요. 감사!

---

이를 위해 각도 지시문 ngClassEven 및 ngClassOdd를 사용해야합니다.

사용 방법은 문서 섹션을 참조하십시오.

http://docs.angularjs.org/api/ng.directive:ngClassEven

http://docs.angularjs.org/api/ng.directive:ngClassOdd

도움이 되었기를 바랍니다.

---

Angular 문서에서 ..

사용 NG 급여 NG-클래스도

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

---

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

---

지시문 내에서 직접 ng-class-odd및 ng-class-even지시문을 사용할 수도 있습니다 ng-repeat.

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

각 행에 대해 멋진 교대 클래스를 제공합니다.

이 예제는 JSON 데이터를 친숙하고 반응이 빠른 Master-View 페이지로 전환하는 방법을 보여주는 다음 페이지에서 가져온 것입니다.

AngularJS를 사용하는 마스터 뷰

---

Fintan Kearney의 답변 개선,

출처 : 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>

참고 URL : https://stackoverflow.com/questions/12179455/how-to-assign-alternate-class-to-rows-in-angular-js