CODEWITHSUNDEEP
cssangularjsangular-ui-bootstrapangular-ui-grid
someGuy
someGuy

Reputation: 63

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

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

enter image description here

    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;
      });

}]);

Upvotes: 0

Views: 1588

Answers (1)

thepio
thepio

Reputation: 6253

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.

Upvotes: 4

Related Questions