<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="tableCtrl as vm">
<div class="container">
<div>
<button type="button" ng-click='vm.changeSource(vm.books)'>Books</button>
<button type="button" ng-click='vm.changeSource(vm.colors)'>Colors</button>
<button type="button" ng-click='vm.changeSource(vm.customers)'>Customers</button>
<button type="button" ng-click='vm.changeSource(vm.products)'>Products</button>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th ng-repeat="(key, value) in vm.records[0]">{{key}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in vm.records">
<td ng-repeat="(key, value) in value">
{{value}}
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
(function(){
var app = angular.module("myApp", []);
app.controller("tableCtrl", function(){
var vm = this;
vm.records = [];
vm.changeSource = function(source){
vm.records = source;
}
vm.$onInit = function(){
vm.changeSource(vm.books);
}
vm.books = [
{ "Book ID": "1", "Book Name": "Computer Architecture", "Category": "Computers", "Price": "125.60" },
{ "Book ID": "2", "Book Name": "Asp.Net 4 Blue Book", "Category": "Programming", "Price": "56.00" },
{ "Book ID": "3", "Book Name": "Popular Science", "Category": "Science", "Price": "210.40" }
];
vm.colors = [
{ "color": "black", "category": "hue", "type": "primary", "code": "#000" },
{ "color": "white", "category": "value", "code": "#FFF" },
{ "color": "red", "category": "hue", "type": "primary", "code": "#FF0" },
{ "color": "blue", "category": "hue", "type": "primary", "code": "#00F" },
{ "color": "yellow", "category": "hue", "type": "primary", "code": "#FF0" },
{ "color": "green", "category": "hue", "type": "secondary", "code": "#0F0"},
];
vm.customers = [
{"Full Name":"James Smith","Street":"123 Gold St","City":"Manhattan","State":"NY","Zip Code":10038},
{"Full Name":"Michael Smith","Street":"49 Fulton St","City":"Manhattan","State":"NY","Zip Code":10037},
{"Full Name":"Maria Garcia","Street":"29-23 Flushing","City":"Queens","State":"NY","Zip Code":12003},
{"Full Name":"David Smith","Street":"703 34 St","City":"Down Manhattan","State":"NY","Zip Code":10027},
{"Full Name":"Maria Rodriguez","Street":"42-129 4th St","City":"Manhattan","State":"NY","Zip Code":10035},
{"Full Name":"Maria Hernandez","Street":"934-28 9th St","City":"Manhattan","State":"NY","Zip Code":10033}
];
vm.products = [
{ "ID": 100, "Product": "Pepsi", "Price": 1.2, "Quantity": 1000 },
{ "ID": 101, "Product": "Mirinda", "Price": 1.17, "Quantity": 500 },
{ "ID": 102, "Product": "Fayrouz", "Price": 2.0, "Quantity": 700 },
{ "ID": 103, "Product": "Mountain Dew", "Price": 1.25, "Quantity": 1500 }
];
})
})();
/* Styles go here */