JSFiddle - React, Tailwind, and code Playground
HTML
<body ng-app>
<div ng-controller="EmpDetCtrl">
<div ng-model="EmpDetTable" class="container body" ng-hide="EmployeeInfoDiv">
<label class="TabHeadings">Employee Details</label>
<div class="EmployeeInfo">
<table ng-model="Employee" border="1">
<thead><tr><th>Name</th><th>Designation</th><th>Salary</th></tr></thead>
<tbody>
<tr ng-repeat="emp in employees">
<td>{{emp.name}}</td>
<td>{{emp.desg}}</td>
<td>{{emp.salary}}</td>
</tr>
</tbody>
</table>
<button ng-click="ShowAddEmployee()">Add</button>
</div>
</div>
<div class="popover right EmployeeInfo" style="width:1500px;" ng-show="EmployeeInfoDiv" >
<label class="TabHeadings" style="width:830px;">Employee Details</label>
<div class="EmployeeInfo">
<table>
<tr><td><label class="table_label">Name:</label></td><td><input type="text" ng-model="name" class="textbox"/></td>
<td><label class="table_label">Designation:</label></td><td><input type="text" ng-model="desg" class="textbox"/></td>
</tr>
</table>
<div ng-model="botton_container">
<button class="save_buttons" ng-click="SaveData();">Save</button>
<button class="cancel_buttons" ng-click="ShowViewEmployee();">Cancel</button>
</div>
</div>
</div>
</div>
</body>
JavaScript
function EmpDetCtrl($scope) {
$scope.employees = [{
name: 'A',
desg: 'C',
salary: '14'
}
];
$scope.addNew = function () {
$scope.employees.push({
name: $scope.name,
desg: $scope.desg,
salary: $scope.salary
});
}
$scope.ShowAddEmployee = function () {
return $scope.EmployeeInfoDiv = true;
}
$scope.ShowViewEmployee = function () {
return $scope.EmployeeInfoDiv = false;
}
}