CODEWITHSUNDEEP
htmlcssangularjs-ng-repeat
Sabreena
Sabreena

Reputation: 649

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

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

enter image description here

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

enter image description here

Upvotes: 3

Views: 954

Answers (4)

Mohammad Usman
Mohammad Usman

Reputation: 39372

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:

Output Image

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>

Upvotes: 2

Vijay Maheriya
Vijay Maheriya

Reputation: 1679

See below example.

angular.module('AppModal', []).controller('OTASheetCtrl', ['$scope', function ($scope) {
  $scope.array=[1,2,3,4,5,6,7,8,9,10];
  }]);
.odd{
    background-color: grey;
}

.even{
    background-color: #d09683;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="AppModal" ng-controller="OTASheetCtrl">
<ul ng-repeat="x in array">
  <li ng-class="{'even':$index%4<=1, 'odd':$index%4<=3}">
    {{x}}
  </li>
</ul>
  </div>

Upvotes: 1

Gurpreet Singh
Gurpreet Singh

Reputation: 3121

check this

tr:nth-child(4n+1), tr:nth-child(4n+2) {
 background-color: red;
}
tr {
 background-color: grey;
}

check fiddle example

Upvotes: 0

Banzay
Banzay

Reputation: 9470

Here is one more solution:

div.card {
    background-color: grey;
}

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

Upvotes: 2

Related Questions