Ananddon Ananddon - 7 months ago 82
CSS Question

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

enter image description here

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

.success(function (data) {
$ = data;



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>'


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