<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="col-md-12">
<div id="ticketsTableAdd" ng-controller="ticketsTableCtrl">
<a ng-click="add()"><span class="glyphicon glyphicon-plus"></span> Add Row</a>
<br />
<div id="ticketsbkg" class="row">
<div class="col-md-2">Ticket Name</div>
<div class="col-md-2">Quanity Avaliable</div>
<div class="col-md-2">Payment Type</div>
<div class="col-md-1">Currency</div>
<div class="col-md-1">Price</div>
<div class="col-md-1">HST</div>
<div class="col-md-1">Fee</div>
<div class="col-md-1">Total Cost</div>
<div class="col-md-1">Actions</div>
</div>
<div ng-repeat="tick in ticks">
<div id="ticketsinfo" class="row">
<div class="col-md-2"><input type="text" class="form-control" placeholder="Ticket Name" /></div>
<div class="col-md-2"><input type="text" class="form-control" placeholder="Quanity Avaliable" /></div>
<div class="col-md-2"><input type="text" class="form-control" placeholder="Payment Type" /></div>
<div class="col-md-1"><input type="text" class="form-control" placeholder="Currency" /></div>
<div class="col-md-1"><input type="text" class="form-control" placeholder="Price" /></div>
<div class="col-md-1"><input type="text" class="form-control" placeholder="HST" /></div>
<div class="col-md-1"><input type="text" class="form-control" placeholder="Fee" /></div>
<div class="col-md-1"><input type="text" class="form-control" placeholder="Total" /></div>
<div class="col-md-1"><a ng-click="showSettings()"><span class="glyphicon glyphicon-cog"></span></a> <a data-ng-click="removeRow($index)"><span class="glyphicon glyphicon-trash"></span></a></div>
</div>
<div id="settings" ng-show="settings" class="row check-element animate-hide">
<div class="row">
<div class="col-md-5">
<small><strong>Settings</strong></small>
<hr />
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div id="ticketsfooter">
</div>
</div>
</div>
</body>
</html>
var myApp = angular.module('myApp',[]);
myApp.controller('ticketsTableCtrl', ticketsTableCtrl);
ticketsTableCtrl.$inject = ['$scope'];
function ticketsTableCtrl($scope) {
$scope.ticks = [{}];
$scope.add = function () {
$scope.ticks.push({});
}
$scope.removeRow = function (index) {
// remove the row specified in index
$scope.ticks.splice(index, 1);
// if no rows left in the array create a blank array
if ($scope.ticks.length() === 0) {
$scope.ticks = [];
}
};
$scope.settings = false;
$scope.showSettings = function () {
//If DIV is hidden it will be visible and vice versa.
$scope.settings = $scope.settings ? false : true;
};
}
.animate-hide {
transition: all linear 0.15s;
opacity: 1;
background: white;
}
.animate-hide.ng-hide {
line-height: 0;
opacity: 0;
}
#settings{
border-width: 0 1px;
border-color: #D2D6DF;
border-style: solid;
border-top: 0;
border-bottom: 10px;
padding-top: 15px;
padding-bottom: 15px;
padding-left:15px;
background-color: #e1e4e6;
}
#ticketsbkg{
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #EFF2F5;
font-weight: 600;
line-height: 22px;
border: 1px solid #D2D6DF;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
}
#ticketsinfo{
border-width: 0 1px;
border-color: #D2D6DF;
border-style: solid;
border-top: 0;
border-bottom: 10px;
padding-top: 15px;
padding-bottom: 15px;
}
#ticketsfooter{
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 1px solid #D2D6DF;
background: #EFF2F5;
margin-top: -1px;
padding-top:20px;
}