angular.module('app', ['ui.grid'])
.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
columnDefs: [
{ name: 'name' },
{ name: 'age' },
{
name: 'gender',
cellClass: function (grid, row, col, rowIndex, colIndex) {
var val = grid.getCellValue(row, col);
if (val === 'male') {
return 'blue';
}
else if (val === 'female') {
return 'pink';
}
}
}
]
};
$http.get('data.json')
.success(function (data) {
$scope.gridOptions.data = data;
});
}]);
body {
font-family: Verdana;
}
.grid {
width: 100%;
height: 250px;
}
.grid .ui-grid-row .blue {
background-color: lightblue;
}
.grid .ui-grid-row .pink {
background-color: pink;
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.21/ui-grid.min.js"></script>
<link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.21/ui-grid.min.css" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions" class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
[
{
"name": "Lesa",
"age": 30,
"gender": "female"
},
{
"name": "Bettye",
"age": 29,
"gender": "female"
},
{
"name": "Contreras",
"age": 23,
"gender": "male"
},
{
"name": "Cameron",
"age": 28,
"gender": "male"
},
{
"name": "Robin",
"age": 20,
"gender": "female"
},
{
"name": "Brenda",
"age": 25,
"gender": "female"
},
{
"name": "Fleming",
"age": 26,
"gender": "male"
},
{
"name": "Cathryn",
"age": 23,
"gender": "female"
},
{
"name": "Hyde",
"age": 25,
"gender": "male"
},
{
"name": "Sarah",
"age": 23,
"gender": "female"
},
{
"name": "Alston",
"age": 28,
"gender": "male"
},
{
"name": "Conrad",
"age": 21,
"gender": "male"
},
{
"name": "Garza",
"age": 23,
"gender": "male"
},
{
"name": "Charles",
"age": 21,
"gender": "male"
},
{
"name": "Herminia",
"age": 20,
"gender": "female"
},
{
"name": "Joy",
"age": 27,
"gender": "female"
},
{
"name": "Meredith",
"age": 26,
"gender": "female"
},
{
"name": "Leach",
"age": 24,
"gender": "male"
},
{
"name": "Sosa",
"age": 24,
"gender": "male"
},
{
"name": "Savage",
"age": 29,
"gender": "male"
},
{
"name": "Morrison",
"age": 25,
"gender": "male"
},
{
"name": "Frankie",
"age": 29,
"gender": "female"
},
{
"name": "Annabelle",
"age": 26,
"gender": "female"
},
{
"name": "Bonnie",
"age": 23,
"gender": "female"
},
{
"name": "Dina",
"age": 26,
"gender": "female"
},
{
"name": "Marva",
"age": 23,
"gender": "female"
},
{
"name": "Jennings",
"age": 21,
"gender": "male"
},
{
"name": "Barbara",
"age": 20,
"gender": "female"
},
{
"name": "Bruce",
"age": 27,
"gender": "male"
},
{
"name": "Albert",
"age": 24,
"gender": "male"
},
{
"name": "Elvira",
"age": 29,
"gender": "female"
},
{
"name": "Araceli",
"age": 23,
"gender": "female"
},
{
"name": "Bullock",
"age": 20,
"gender": "male"
},
{
"name": "Victoria",
"age": 23,
"gender": "female"
},
{
"name": "Matthews",
"age": 21,
"gender": "male"
},
{
"name": "Case",
"age": 28,
"gender": "male"
},
{
"name": "Amie",
"age": 20,
"gender": "female"
},
{
"name": "Ruby",
"age": 29,
"gender": "female"
},
{
"name": "Linda",
"age": 28,
"gender": "female"
},
{
"name": "Tracey",
"age": 20,
"gender": "female"
},
{
"name": "Diaz",
"age": 23,
"gender": "male"
},
{
"name": "Priscilla",
"age": 24,
"gender": "female"
},
{
"name": "Dixie",
"age": 26,
"gender": "female"
},
{
"name": "Sharron",
"age": 22,
"gender": "female"
},
{
"name": "Deidre",
"age": 21,
"gender": "female"
},
{
"name": "Potter",
"age": 24,
"gender": "male"
},
{
"name": "Mcdonald",
"age": 29,
"gender": "male"
},
{
"name": "Hartman",
"age": 30,
"gender": "male"
},
{
"name": "Cook",
"age": 30,
"gender": "male"
},
{
"name": "Powell",
"age": 20,
"gender": "male"
},
{
"name": "Janette",
"age": 30,
"gender": "female"
},
{
"name": "Mcfarland",
"age": 21,
"gender": "male"
},
{
"name": "Lorena",
"age": 24,
"gender": "female"
},
{
"name": "Bright",
"age": 28,
"gender": "male"
},
{
"name": "Ester",
"age": 23,
"gender": "female"
},
{
"name": "Marks",
"age": 30,
"gender": "male"
},
{
"name": "Christa",
"age": 30,
"gender": "female"
},
{
"name": "Gray",
"age": 26,
"gender": "male"
},
{
"name": "Benjamin",
"age": 25,
"gender": "male"
},
{
"name": "Lacy",
"age": 28,
"gender": "female"
},
{
"name": "Belinda",
"age": 28,
"gender": "female"
},
{
"name": "Diane",
"age": 23,
"gender": "female"
},
{
"name": "Gross",
"age": 30,
"gender": "male"
},
{
"name": "Wise",
"age": 27,
"gender": "male"
},
{
"name": "Dunlap",
"age": 26,
"gender": "male"
},
{
"name": "Ferrell",
"age": 22,
"gender": "male"
},
{
"name": "Durham",
"age": 24,
"gender": "male"
},
{
"name": "Gertrude",
"age": 20,
"gender": "female"
},
{
"name": "Marla",
"age": 25,
"gender": "female"
},
{
"name": "Kemp",
"age": 23,
"gender": "male"
},
{
"name": "Murray",
"age": 21,
"gender": "male"
},
{
"name": "Naomi",
"age": 20,
"gender": "female"
},
{
"name": "Love",
"age": 20,
"gender": "male"
},
{
"name": "Angelita",
"age": 24,
"gender": "female"
},
{
"name": "Zamora",
"age": 20,
"gender": "male"
},
{
"name": "Keri",
"age": 28,
"gender": "female"
},
{
"name": "Pruitt",
"age": 23,
"gender": "male"
},
{
"name": "Joyce",
"age": 28,
"gender": "female"
},
{
"name": "Lula",
"age": 24,
"gender": "female"
},
{
"name": "Hall",
"age": 20,
"gender": "male"
},
{
"name": "Head",
"age": 23,
"gender": "male"
},
{
"name": "Haynes",
"age": 22,
"gender": "male"
},
{
"name": "Craig",
"age": 27,
"gender": "male"
},
{
"name": "Baxter",
"age": 26,
"gender": "male"
},
{
"name": "Delores",
"age": 25,
"gender": "female"
},
{
"name": "Bernard",
"age": 24,
"gender": "male"
},
{
"name": "Desiree",
"age": 26,
"gender": "female"
},
{
"name": "Chrystal",
"age": 24,
"gender": "female"
},
{
"name": "Stokes",
"age": 26,
"gender": "male"
},
{
"name": "Griffin",
"age": 23,
"gender": "male"
},
{
"name": "Lawanda",
"age": 27,
"gender": "female"
},
{
"name": "Ford",
"age": 27,
"gender": "male"
},
{
"name": "Lucile",
"age": 26,
"gender": "female"
},
{
"name": "Carroll",
"age": 30,
"gender": "male"
},
{
"name": "Skinner",
"age": 28,
"gender": "male"
},
{
"name": "Celina",
"age": 25,
"gender": "female"
},
{
"name": "Pope",
"age": 29,
"gender": "male"
},
{
"name": "Leah",
"age": 29,
"gender": "female"
},
{
"name": "Rosie",
"age": 25,
"gender": "female"
},
{
"name": "Miriam",
"age": 27,
"gender": "female"
}
]