why collection repect not show alternate color in

Question

I am using ionic framework .I make a simple demo of table using ng-repeat In this I make alternate color of each row which is running perfectly here is perfect code in which I used ng-repeat

I used I ng-repeat

<ion-scroll scrollbar-y="true" delegate-handle="i" ng-style="viewHeight">
  <div class="row" ng-repeat="column in inv | limitTo: counter  track by $index" ng-class-odd="'odd-row'">
    <div class="col brd collapse-sm" ng-repeat="field in column.columns" ng-show="d_column_name[$index].checked && d_column_name[$index].d===field.d">{{field.value}}</div>
    <div class="col col-10 text-center brd collapse-sm"></div>
  </div>
</ion-scroll>
<ion-infinite-scroll immediate-check="false" on-infinite="loa(query)" distance="10%"></ion-infinite-scroll>

Now I change collection-repeat instead of ng-repeat I face few issues

here is my code which I use collection-repeat

I face few issues

• There is no alternate colors in row when application run
• when I scroll down bottom after few seconds it show alternate color.but when user scroll up then automatically it show alternate row color why ?
• how to remove gap between the rows ?

I used this isead of ng repeat

 <ion-content class="padding">

        <ion-scroll scrollbar-y="true" delegate-handle="i" ng-style="viewHeight">
          <div class="row" collection-repeat="column in i   track by $index" ng-class-odd="'odd-row'">
            <div class="col brd collapse-sm" ng-repeat="field in column.columns" ng-show="i_column_name[$index].checked && i_column_name[$index].d===field.d">{{field.value}}</div>
            <div class="col col-10 text-center brd collapse-sm"></div>
          </div>
        </ion-scroll>
      </ion-content>

Answer 1

4 solutions :

with ng-class-odd and ng-class-even

<div collection-repeat="item in items" ng-class-odd="odd-row" ng-class-even="even-row"></div>

or with ng-class

<div collection-repeat="item in items" ng-class="{'even-row':$even,'odd-row':$odd}"></div>

or with plain css

ion-scroll div.row:nth-child(even) {background: red}
ion-scroll div.row:nth-child(odd)  {background: blue}

finally to avoid using odd and even helpers

 <div collection-repeat="item in items" ng-class="{white:$index%2 == 0,blue:$index%2 == 1}"></div>

EDIT : update class name to match yours

don't forget to declare these classes to see the difference :

ion-scroll .even-row{background: red}
ion-scroll .odd-row {background: blue}