I am trying to hide the div in tabview and after click on save button i want to show that div. How can i get this? In following code when i will click on Save data from Add Records tab it should toggle to display records and display added records in table. which is hidden by default for now.
This is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body ng-app="mainApp">
<div ng-controller="MyController">
<div class="tabgroup" ng-init="tab=1">
<div class="tab" ng-class="{selected: tab==1}" ng-click="tab = 1">Home</div>
<div class="tab" ng-class="{selected: tab==2}" ng-click="tab = 2">Display Records</div>
<div class="tab" ng-class="{selected: tab==3}" ng-click="tab = 3">Add Records</div>
<div class="tab" ng-class="{selected: tab==4}" ng-click="tab = 4">Edit/Remove Records</div>
</div>
<div class="otherContainer">
<div class="tabcontents">
<div ng-show="tab == 1">
This application shows employee details registered for this site. You can add your records by clicking on add button.
Also you can update and delete records.
</div>
<div ng-show="tab == 2">
<div>
<p> There is no data to display</p>
<a href ng-click="tab = 3"> Add Records</a></div>
<div ng-show="showDiv">
<table border= 1>
<thead>
<th>Id</th>
<th>Name</th>
<th>Birthdate</th>
<th>Address</th>
<th>Contact</th>
<th>Email</th>
</thead>
<tr data-ng-repeat="Emp in EmpList">
<td ng-bind = "Emp.Id"></td>
<td ng-bind = "Emp.Name"></td>
<td ng-bind = "Emp.Birthdate"></td>
<td ng-bind ="Emp.Address"></td>
<td ng-bind = "Emp.Contact"></td>
<td ng-bind = "Emp.Email" ></td>
<th><input type="button" ng-click= "removeItem()" value="Remove" /></th>
<th><input type="button" ng-click= "editItem(i)" value="Edit" /></th>
</tr>
</table>
</div>
</div>
<div ng-show="tab == 3">
<form name="userForm">
<table>
<tr>
<td>Name:</td>
<td>
<input name= "myInput" type="text" data-ng-model="EmpModel.Name" required/>
<span ng-show="userForm.myInput.$touched" && "userForm.myInput.$invalid">
<span ng-show="userForm.myInput.$error">Name is required</span>
</span>
</td>
</tr>
<tr>
<td>Birthdate:</td>
<td>
<input name= "myInput" type="date" data-ng-model="EmpModel.Dob" required/>
<span ng-show="userForm.myInput.$touched" && "userForm.myInput.$invalid">
Birthdate is required
</span></td>
</tr>
<tr>
<td>Address:</td>
<td>
<input name= "myInput" type="text" data-ng-model="EmpModel.Address" />
<span ng-show="userForm.myInput.$touched" && "userForm.myInput.$invalid">Address is required</p></td>
</tr>
<tr>
<td>Contact:</td>
<td>
<input name= "myInput" type="number" data-ng-model="EmpModel.Contact" />
<p ng-show="userForm.myInput.$error.required">Contact is required</p></td>
</tr>
<tr>
<td>EmailId:</td>
<td>
<input name= "myInput" type="email" data-ng-model="EmpModel.Email" />
<p ng-show="userForm.myInput.$error.required">Emailid is required</p></td>
</tr>
<tr>
<td><input type="button" ng-click="AddData()" value="Save Data"/></td>
<td><input type="button" ng-click= " AddData()" value="Update" style="display:none" /></td>
</tr>
</table>
</form>
</div>
<div ng-show="tab == 4">
<table border= 1>
<thead>
<th>Id</th>
<th>Name</th>
<th>Birthdate</th>
<th>Address</th>
<th>Contact</th>
<th>Email</th>
</thead>
<tr data-ng-repeat="Emp in EmpList">
<td ng-bind = "Emp.Id"></td>
<td ng-bind = "Emp.Name"></td>
<td ng-bind = "Emp.Birthdate"></td>
<td ng-bind ="Emp.Address"></td>
<td ng-bind = "Emp.Contact"></td>
<td ng-bind = "Emp.Email" ></td>
<th><input type="button" ng-click= "removeItem()" value="Remove" /></th>
<th><input type="button" ng-click= "editItem(i)" value="Edit" /></th>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
js -
var app = angular.module("mainApp", []);
app.controller('MyController', function ($scope) {
$scope.EmpModel = {
Birthdate: 0,
Name: '',
Address: '',
Contact: '',
Email: '',
};
console.log($scope.EmpModel);
$scope.EmpList = [];
$scope.AddData = function () {
var _emp = {
Id: $scope.EmpList.length + 1,
Name: $scope.EmpModel.Name,
Birthdate: $scope.EmpModel.Dob,
Address: $scope.EmpModel.Address,
Contact: $scope.EmpModel.Contact,
Email: $scope.EmpModel.Email
};
$scope.EmpList.push(_emp);
$scope.tab = 2;
ClearModel();
}
function ClearModel() {
$scope.EmpModel.Id = 0;
$scope.EmpModel.Name = '';
$scope.EmpModel.Dob = '';
$scope.EmpModel.Address = '';
$scope.EmpModel.Contact = '';
$scope.EmpModel.Email = '';
}
$scope.removeItem = function (index) {
console.error("rrrrrrrr");
console.log(index);
$scope.EmpList.splice(index, 1)
}
$scope.editItem = function(id) {
console.error("errrroooooorrr")
for (i in $scope.EmpList) {
console.log($scope.EmpList);
if ($scope.EmpList[i].id == id) {
$scope.EmpModel = angular.copy($scope.EmpList[i]);
$scope.EmpList.splice(id,1);
//$scope.EmpList[0].id =id;
EmpList.splice(id, 1);
}
}
}
$scope.hideMe = function(){
console.log('hide the button');
$scope.hide();
}
});
