grid example 1

basic ui grid

by Kai_Draord

HTML

<div ng-app="app">
    <div ng-controller="MainCtrl">
        <div ui-grid="{ data: myData.Data }" class="grid"></div>
    </div>
</div>
<p><a target="_blank" href="http://blog.backand.com/ng-grid-and-a-simple-rest-api/">Back to the article</a></p>
<p><a target="_blank" href="https://www.backand.com/apps/#/sign_up">Create your own backend</a></p>

CSS

</style> <!-- remove this, it is just for jsfiddle --> 
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script> 
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script> 
<style>
.grid {
  width: 500px;
  height: 250px;
}

JavaScript

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', function ($scope) {

    $scope.myData = {
            'Type' : 
            [
                'A',
                'B',
                'C'
            ],
            'Data': [
            {
                'Key': 'XXX',
                'AValues':
                {
                    'ID': '1',
                    'Val': '10'
                },
                'BValues':
                {
                    'ID': '2',
                    'Val': '20'
                },
                'CValues':
                {
                    'ID': '2',
                    'Val': '20'
                }
            },
            {
                'Key': 'TTT',
                'AValues':
                {
                    'ID': '2',
                    'Val': '30'
                },
                'BValues':
                {
                    'ID': '4',
                    'Val': '70'
                },
                'CValues':
                {
                    'ID': '2',
                    'Val': '20'
                }
            }
            ]
        };
        angular.forEach($scope.myData.Data, function(value, index){
          value.AValues = value.AValues.Val;
          value.BValues = value.BValues.Val;
          value.CValues = value.CValues.Val;
          $scope.myData.Data[index] = value;
        });
}]);