Handling two rows in ng-repeat with same colour for n items

Question

I have an array of objects which I need to show as list, required design is

I tried the code below

.odd{
    background-color: grey;
}

.even{
    background-color: #d09683;
}

<ion-audio-track track="track" ng-repeat="x in array" ng-if="track.Size!=0">
        <div class="card" ng-class="{'even':$index%2, 'odd':!($index%2)}">
            <div class="row">
              //item prints here
            </div>
          </div>
  </ion-audio-track>

but what I got is

Answer 1

Here is one more solution:

div.card {
    background-color: grey;
}

div.card:nth-child(4n), div.card:nth-child(4n-1) {
    background-color: #d09683;
}

Answer 2

First of all we will apply one background-color for all list items.

ul li {
  background: blue;
}

In second step we will use 2 css selectors that will override background of specific list items by creating an even pattern:

ul li:nth-child(4n + 1),
ul li:nth-child(4n + 2) {
  background: green;
}

Image Output:

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li {
  background: blue;
  margin-bottom: 10px;
  padding: 5px 10px;
  color: white;
}

ul li:nth-child(4n + 1),
ul li:nth-child(4n + 2) {
  background: green;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
</ul>