<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <link data-require="ng-grid@*" data-semver="2.0.14" rel="stylesheet" href="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/ng-grid.css" />
  <script data-require="ng-grid@*" data-semver="2.0.14" src="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/build/ng-grid.js"></script>
  <script data-require="ng-grid@*" data-semver="2.0.14" src="//cdn.rawgit.com/angular-ui/ng-grid/v2.0.14/plugins/ng-grid-flexible-height.js"></script>
  <script data-require="angular.js@*" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
  <script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>

  <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
  <style>
    /*style.css*/
    .gridStyle {
      border: 1px solid rgb(212, 212, 212);
      width: 1024px;
      height: 600px
    }
  </style>
</head>

<body ng-controller="MyCtrl">
  <a href="/meta+">link to metadata</a>
  <br />
  <strong>Filter:</strong>
  <input type="text" ng-model="filterOptions.filterText" />
  <br />
  <div class="gridStyle" ng-grid="gridOptions"></div>

  <br />
  <br />
  <div class="gridStyle" ng-grid="gridOptions2"></div>
  <script>
    // main.js
    var app = angular.module('myApp', ['ngGrid']);



    app.controller('MyCtrl', function($scope, $http) {
      $scope.mySelections = [];
      $scope.filterOptions = {
        filterText: ''
      };
      $http.get('http://www.w3schools.com/website/Customers_JSON.php').success(function(thisdata) {
        //Convert data to array.
        $scope.myData = angular.fromJson(thisdata);
      });
      var resultJSON = {};
      var arr = [];
      $scope.gridOptions = {
        data: 'myData',
        enableColumnResize: true,
        maxWidth: '900px',
        minWidth: '50px',
        filterOptions: $scope.filterOptions,
        showColumnMenu: true,
        selectedItems: $scope.mySelections,
        multiSelect: false,
        afterSelectionChange: function(rowItem) {
          if (rowItem.selected) {
            //write code to execute only when selected.
            //alert(rowItem.entity );  //rowItem.entity is the "data" here
            
            var detailData = [];
            angular.forEach(rowItem.entity, function(key, value){
              var dataRow = { col1: key, col2: value };
              detailData.push(dataRow);
            });

            $scope.detailsGridData = detailData;
          } else {
            //write code on deselection.
          }
        },
        columnDefs: [{
          field: 'Name',
          displayName: 'Name',

        }, {
          field: 'City',
          displayName: 'City'
        }, {
          field: 'Country',
          displayName: 'Country'
        }]
      };

    var selectedOption="";
      $scope.gridOptions2 = {
        data: 'detailsGridData',
        afterSelectionChange: function(rowItem) {
          selectedOption.colorCell="green";
          if (rowItem.selected) {
            //write code to execute only when selected.
            alert(rowItem.entity); //rowItem.entity is the "data" here

          } else {
            //write code on deselection.
          }

        },
        columnDefs: [{
          field: 'col1',
          displayName: 'Name',
          visible: true


        }, {
          field: 'col2',
          displayName: 'Time Stamp',
          visible: true,
          cellTemplate: '<div style="background-color:{{colorCell}}" ng-click=colorchange(this)>{{row.getProperty(col.field)}}</div>'
        }]
      };
$scope.colorchange = function(contex) {
        contex.colorCell="red";
        selectedOption=contex;
      };
     

      $scope.filterNephi = function() {
        var filterText = 'name:Nephi';
        if ($scope.filterOptions.filterText === '') {
          $scope.filterOptions.filterText = filterText;
        } else if ($scope.filterOptions.filterText === filterText) {
          $scope.filterOptions.filterText = '';
        }
      };


    });
  </script>
</body>

</html>
// Code goes here

/* Styles go here */