giving different color scheme to (odd/even) for rows within rows in UI grid using Angular JS

Question

I am trying to divide a Row into two ie. Row Span in Angular JS UI Grid. I am not able to find how to do this.I need different color schemes for rows within the rows of the UI grid. The Plunker code is http://plnkr.co/edit/c65CZm19bGJbWfZT15u6?p=preview

    app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
      $scope.gridOptions = {
        rowHeight:50,
        columnDefs: [
          { field: 'name' },
          { field: 'phoneList', name: 'Phone Numbers', cellTemplate:'<div ng-repeat="item in row.entity[col.field]">{{item}}</div>'}
        ],
         enableColumnResizing: true
      };

      $http.get('data.json')
      .success(function (data) {
        $scope.gridOptions.data = data;
      });

}]);

Here you are with the same question in a different format. So the name would be the one on the red and phonenumbers divided into the green rows? — thepio, May 31 '16 at 11:52
yes.In the 2nd column, the color schemes should be different (rows within a row). The rows within a row should have a different background color. @thepio — someGuy, May 31 '16 at 11:55

score 4 · Accepted Answer · answered May 31 '16 at 11:57

You can use the :nth-child css selector with even and odd like this:

.phonenumber:nth-child(even) {
  background: red
}

.phonenumber:nth-child(odd) {
  background: green 
}

I also added the class phonenumber into your template:

cellTemplate:'<div class="phonenumber" ng-repeat="item in row.entity[col.field]">{{item}}</div>'

Plunker: http://plnkr.co/edit/CozqxvfmkhDzBBEeHcJ0?p=preview

Sorry for emphasising the solution with such colors but at least it's clear what is happening this way.

giving different color scheme to (odd/even) for rows within rows in UI grid using Angular JS

1 Answers1