Saturday, June 27, 2015

ng Grid Change cell Color

Posted by at 

<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
    <style type="text/css">
        .gridStyle {
            border: 1px solid rgb(212,212,212);
            width: 400px;
            height: 300px;
        }

        .red {
            background-color: red;
            color: white;
        }

        .green {
            background-color: green;
            color: white;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
    <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
    <script type="text/javascript">
        var app = angular.module('myApp', ['ngGrid']);
        app.controller('MyCtrl', function ($scope) {
            $scope.myData = [{ name: "Name1", age: 1 },
                             { name: "Name2", age: 2 },
                             { name: "Name3", age: 3 },
                             { name: "Name4", age: 4 },
                             { name: "Name5", age: 5 }];
            $scope.gridOptions = {
                data: 'myData',
                columnDefs: [{
                    field: 'name',
                    displayName: 'Name'
                }, {
                    field: 'age',
                    displayName: 'Age',
                    cellTemplate: '<div class="ngCellText" ng-class="{\'green\' : row.getProperty(\'age\') == \'5\' }">{{ row.getProperty(col.field) }}</div>'
                }]
            };


        });
    </script>
</head>
<body ng-controller="MyCtrl">
    <div class="gridStyle" ng-grid="gridOptions"></div>
</body>
</html>

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)