<!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 */