<!DOCTYPE html>
<html lang="en" ng-app="productBackend">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Product Backend</title>
<!-- Bootstrap -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="./mystyles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container" ng-controller="menuController">
<div ng-controller="ExampleController">
</div>
<input type="text" class="search" ng-model="searchString" placeholder="Enter your search terms" />
<select>
<option ng-model="dropdownString" ng-repeat="client in products | unique:'tenant'">{{client.tenant}}</option>
</select>
<div class="tab-content">
<ul class="media-list tab-pane fade in active">
<div class="row row-content">
<div class="col-xs-12">
<ul class="media-list">
<li class="media">
<div class="media-left media-middle">
</div>
<div class="media-body">
<table>
<tr>
<th class="table-1">Product description</th>
<th>SKU</th>
<th>Tenant</th>
<th>Select</th>
</tr>
<tr ng-repeat="product in products | searchFor:searchString">
<td>{{product.description}}</td>
<td>{{product.sku}}</td>
<td>{{product.tenant}}</td>
<td><input type="checkbox"></td>
</tr>
</table>
</div>
</li>
</ul>
</ul>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script>
var app = angular.module('productBackend', []);
app.controller('menuController', function ($scope, $http) {
$scope.search=[];
$http.get('./products.json')
.then(function (res) {
$scope.products = res.data;
});
});
app.filter('searchFor', function () {
return function (arr, searchString) {
if (!searchString) {
return arr;
}
var result = [];
searchString = searchString.toLowerCase();
angular.forEach(arr, function (item) {
if (item.sku.toLowerCase().indexOf(searchString) !== -1) {
result.push(item);
}
});
return result;
};
});
app.filter('selecteshgro', function () {
return function (arr, selected) {
if (!selected) {
return arr;
}
var result = [];
angular.forEach(arr, function (item) {
if (item.tenant.toLowerCase().indexOf(selected) !== -1) {
result.push(item);
}
});
return result;
};
});
app.filter('unique', function() {
return function(collection, keyname) {
var output = [],
keys = [];
angular.forEach(collection, function(item) {
var key = item[keyname];
if(keys.indexOf(key) === -1) {
keys.push(key);
output.push(item);
}
});
return output;
};
});
app.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
singleSelect: null,
multipleSelect: [],
option1: 'option-1'
};
$scope.forceUnknownOption = function() {
$scope.data.singleSelect = 'nonsense';
};
}]);
</script>
</body>
</html>
.row-header {
margin: 0px auto;
padding: 0px 0px;
}
.row-content {
margin: 0px auto;
padding: 50px 0px;
border-bottom: 1px ridge;
min-height: 400px;
}
.row-footer {
margin: 0px auto;
padding: 20px 0px;
background-color: #AfAfAf;
}
.jumbotron {
margin: 0px auto;
padding: 70px 30px;
background: #7986CB;
color: floralwhite;
}
.carousel {
background: #1a237e;
}
.carousel .item {
height: 300px;
}
.carousel .item img {
left: 0;
min-height: 300px;
position: absolute;
top: 0;
}
.navbar-inverse {
background: #303f9f;
color: #ffffff;
}
.navbar-inverse .navbar-nav > .active > a {
background: #1a237e;
color: #ffffff;
}
.navbar-inverse .navbar-nav > .active > a:hover {
background: #1a237e;
color: #ffffff;
}
.navbar-inverse .navbar-nav > .active > a:focus {
background: #1a237e;
color: #ffffff;
}
.navbar-inverse .navbar-nav > .open > a {
background: #1a237e;
color: #ffffff;
}
.navbar-inverse .navbar-nav > .open > a:hover {
background: #1a237e;
color: #ffffff;
}
.navbar-inverse .navbar-nav > .open > a:focus {
background: #1a237e;
color: #ffffff;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
background-color: #303f9f;
color: #eeeeee;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover {
color: #000000;
}
.navbar-inverse .navbar-nav .open .dropdown-menu {
background-color: #303f9f;
color: #eeeeee;
}
address {
color: #0f0f0f;
font-size: 80%;
margin: 0px;
}
body {
align: center;
padding: 50px 0px 0px 0px;
z-index: 0;
}
.tab-content {
border-bottom: 1px solid #dddddd;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
padding: 10px;
}
.affix {
top: 100px;
}
#carouselButtons {
bottom: 0px;
position: absolute;
right: 0px;
}
table {
width: 100%;
}
td {
padding: 10px 10px 10px 20px;
border-bottom: 1px solid #ddd;
}
th {
border-bottom: 2px solid #8CC545;
padding: 10px 10px 10px 20px;
}
[{
"sku": "S-MLX-SEC-002",
"description": "Intrusion Prevention",
"tenant": "Customer 1"
}, {
"sku": "S-MLX-MCA-007",
"description": "Microsoft Lync Enterprise - Private Cloud",
"tenant": "Customer 1"
},{
"sku": "S-MLX-SEC-002",
"description": "Intrusion Prevention",
"tenant": "Customer 1"
}, {
"sku": "S-MLX-SEC-004",
"description": "Local privacy compliance",
"tenant": "Customer 1"
}, {
"sku": "S-MLX-S02-100",
"description": "Location based Access",
"tenant": "Customer 1"
},{
"sku": "S-MLX-SEC-002",
"description": "Intrusion Prevention",
"tenant": "Customer 1"
}, {
"sku": "S-MLX-S02-510",
"description": "Two factor authentication - Hard Token Security",
"tenant": "Customer 1"
}, {
"sku": "S-MLX-MCA-007",
"description": "Microsoft Lync Enterprise - Private Cloud",
"tenant": "Customer 1"
},{
"sku": "S-MLX-CHG-001",
"description": "Changes level Business - for Global Desktop Bundel",
"tenant": "Customer 1"
}, {
"sku": "S-MLX-GLD-003",
"description": "Global Desktop Business Bundel - Performance - Private Cloud",
"tenant": "Customer 1"
}, {
"sku": "S-MLX-GLD-012",
"description": "Global Desktop Foundation - Standard - Private Cloud",
"tenant": "Customer 1"
},{
"sku": "S-MLX-OFF-001",
"description": "Microsoft Office Standard - Private Cloud",
"tenant": "Customer 1"
}, {
"sku": "S-MLX-LOB-824",
"description": "Exact Financials (CL) - Private Cloud",
"tenant": "Customer 1"
}, {
"sku": "S-MLX-MCA-007",
"description": "Microsoft Lync Enterprise - Private Cloud",
"tenant": "Customer 2"
},{
"sku": "S-MLX-SEC-002",
"description": "Intrusion Prevention",
"tenant": "Customer 2"
}, {
"sku": "S-MLX-SEC-004",
"description": "Local privacy compliance",
"tenant": "Customer 2"
}, {
"sku": "S-MLX-S02-100",
"description": "Location based Access",
"tenant": "Customer 2"
},{
"sku": "S-MLX-SEC-002",
"description": "Intrusion Prevention",
"tenant": "Customer 2"
}, {
"sku": "S-MLX-S02-510",
"description": "Two factor authentication - Hard Token Security",
"tenant": "Customer 2"
}, {
"sku": "S-MLX-MCA-007",
"description": "Microsoft Lync Enterprise - Private Cloud",
"tenant": "Customer 2"
},{
"sku": "S-MLX-CHG-001",
"description": "Changes level Business - for Global Desktop Bundel",
"tenant": "Customer 2"
}, {
"sku": "S-MLX-GLD-003",
"description": "Global Desktop Business Bundel - Performance - Private Cloud",
"tenant": "Customer 2"
}, {
"sku": "S-MLX-GLD-012",
"description": "Global Desktop Foundation - Standard - Private Cloud",
"tenant": "Customer 2"
},{
"sku": "S-MLX-OFF-001",
"description": "Microsoft Office Standard - Private Cloud",
"tenant": "Customer 2"
}, {
"sku": "S-MLX-LOB-824",
"description": "Exact Financials (CL) - Private Cloud",
"tenant": "Customer 2"
}]