Change background color of every other div in a row

Question

I have the following table There are div elements in it that are repeated based on the number of items in array.

There is only one tr in the table and 1st and 2nd td are not related to 3rd and 4th td in the row.

In a td I repeat div for the length of an array. In the image, the data between Balance B/d and Income in the first column is an array and Income has its own array and so on.

I've done this but this does not work as you can see in the image. I tried to add shaded-row using ng-class to an even row, but this wont work.

Maybe I can do .statement-item:nth-child(even) but a statement-container has statement-item to which the shaded-row has to be applied. Should I remove the statement-container parent and do .statement-item:nth-child(even) or is there another way?

    <tr>
   <!-- <td class="text-center sl-no-td">{{($index + 1)}}</td> -->
   <td class="v-align-top zeroPadding">
      <!--Receipts-->
      <!--Opening balance-->
      <div ng-show="balanceArray.length" class="statement-container">
         <div class="statement-item">
            <strong>Balance B/d</strong>
         </div>
         <div ng-repeat="subItem in balanceArray" ng-class="{'shaded-row': $index % 2 == 0}" class="statement-item">
            {{subItem.ledger_name}} 
         </div>
      </div>
      <!--End Opening balance-->
      <!--Income-->
      <div ng-show="incomeArrayForReceiptStmt.length" class="statement-container">
         <div class="statement-item">
            <strong>Income</strong>
         </div>
         <div ng-repeat="subItem in incomeArrayForReceiptStmt" ng-class="{'shaded-row': $index % 2 == 0}" class="statement-item">
            {{subItem.ledger_name}}
         </div>
      </div>
      <!--End Income-->

      <!--Receipts-->
   </td>
   <td class="journal-type-td v-align-top  zeroPadding">
      <!--Receipts Amount-->
      <!--Opening balance-->
      <div class="statement-item invisible">
         <strong>Balance B/d</strong>
      </div>
      <div ng-show="balanceArray.length" class="statement-container">
         <div ng-repeat="subItem in balanceArray" ng-class="{'border-top-statement': $index == 0, 'shaded-row': $index % 2==0}" class="text-right statement-item">
            {{subItem.opening_amount | amountFormatFilter}}
         </div>
      </div>
      <!--End Opening balance-->
      <!--Income-->
      <div ng-show="incomeArrayForReceiptStmt.length" class="statement-container">
         <div class="statement-item invisible">
            <strong>Income</strong>
         </div>
         <!-- <strong>Income</strong> -->
         <div ng-repeat="subItem in incomeArrayForReceiptStmt" ng-class="{'border-top-statement': $index == 0, 'shaded-row': $index % 2==0}" class="text-right statement-item">
            {{subItem.paid | amountFormatFilter}}
         </div>
      </div>
      <!--End Income-->

      <!--Payments Amount-->
   </td>
   <td class="journal-type-td v-align-top  zeroPadding">
      <!--Payments-->
      <!--Expenses-->
      <div ng-show="expenseArrayForReceiptStmt.length" class="statement-container">
         <div class="statement-item">
            <strong>Expenses</strong>
         </div>
         <div ng-repeat="subItem in expenseArrayForReceiptStmt"  ng-class="{'shaded-row': $index % 2 == 0}"  class="statement-item">
            {{subItem.ledger_name}}
         </div>
      </div>
      <!--End Expenses-->
      <!--Assets-->
      <div ng-show="assetArray.length" class="statement-container">
         <div class="statement-item">
            <strong>Assets</strong>
         </div>
         <div ng-repeat="subItem in assetArray"  ng-class="{'shaded-row': $index % 2 == 0}" class="statement-item">
            {{subItem.ledger_name}}
         </div>
      </div>
      <!--End Assets-->

      <!--Closing balance-->
      <div ng-show="balanceArray.length" class="statement-container">
         <div class="statement-item">
            <strong>Balance C/d</strong>
         </div>
         <div ng-repeat="subItem in balanceArray"  ng-class="{'shaded-row': $index % 2 == 0}" class="statement-item">
            {{subItem.ledger_name}}
         </div>
      </div>
      <!--End Closing balance-->
      <!--End Payments-->
   </td>
   <td class="journal-type-td v-align-top  zeroPadding">
      <!--Receipts Amount-->
      <!--Expenses-->
      <div ng-show="expenseArrayForReceiptStmt.length" class="statement-container">
         <div class="statement-item invisible">
            <strong>Expense</strong>
         </div>
         <div ng-repeat="subItem in expenseArrayForReceiptStmt" ng-class="{'border-top-statement': $index == 0, 'shaded-row': $index % 2==0}" class="text-right statement-item">
            {{subItem.paid | amountFormatFilter}}
         </div>
      </div>
      <!--End Expenses-->
      <!--Assets-->
      <div ng-show="assetArray.length" class="statement-container">
         <div class="statement-item invisible">
            <strong>Assets</strong>
         </div>
         <div ng-repeat="subItem in assetArray" ng-class="{'border-top-statement': $index == 0, 'shaded-row': $index % 2==0}" class="text-right statement-item">
            {{subItem.paid | amountFormatFilter}}
         </div>
      </div>
      <!--End Asset-->

      <!--Closing balance-->
      <div ng-show="balanceArray.length" class="statement-container">
         <div class="statement-item invisible">
            <strong>Closing</strong>
         </div>
         <div ng-repeat="subItem in balanceArray" ng-class="{'border-top-statement': $index == 0, 'shaded-row': $index % 2==0}" class="text-right statement-item">
            {{subItem.closing_amount | amountFormatFilter}}
         </div>
      </div>
      <!--End Closing balance-->
      <!--End Payments Amount-->
   </td>
</tr>

Answer 1

Here's an idea, create a function that contains an array of random colours and select one at random. Something like below:

addColor() {
    let arr = ['#ffffff', '#000000', '#ff0000', '#00ff00', '#0000ff'];

    let color = arr[Math.floor(Math.random() * arr.length)];

    return color;
}

Or you could create a global variable array that contains an array of objects which look like

var arr = [{color: '#fff', used: false}, {color: '#000', used: true}];

Then you can create your function that runs a for loop over that array:

let color = '';

for(let i = 0; i < arr.length; i++) {
  if(!arr[i].used) {
    arr[i].used = true;
    color = arr[i].color;
    break;
  }
}

return color;

I think you can then use something like ng-style="{'background-color' : addColor()}" (I'm not too familiar with angular, apologies.)

Hope this helps get the ball rolling for you.

Answer 2

What about if into the 2nd repeater check the prevoius collection length and depending on the length (even/odd) reverse your ng-class logic eg

balanceArray.length % 2  ===  0 ? $index % 2 == 0 : $index % 2 != 0

btw if you don't have a reason for separating them with container, then probably is better to keep all items together and do the magic with css (odd/even) child.