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' 속성을 사용하는 것 같습니다.왜 그러는 거야?Angular에게 말할 수 있을까요?JS는 내부 평가에 클래스 속성을 사용하지 않습니다.

제발 도와주세요.감사합니다!

여기에는 각도 지시 ngClassEven 및 ngClassOdd를 사용해야 합니다.

사용 방법에 대해서는, 메뉴얼의 섹션을 참조해 주세요.

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

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

Angular 문서에서...

ng-class-홀수 ng-class-even 사용

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

@ganaraj states 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 데이터를 알기 쉽고 응답성이 뛰어난 마스터 뷰 페이지로 변환하는 방법도 보여줍니다.

각도를 사용한 마스터 뷰JS

핀탄 카니의 답변을 개선하면

송신원: https://docs.angularjs.org/api/ng/directive/ngClassOdd

Style.css

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

index.displaces를 표시합니다.

<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