-1
我想隱藏在TabView的div和點擊保存按鈕後，我想顯示該div。我怎麼能得到這個？ 在下面的代碼中，當我點擊從添加記錄選項卡保存數據時，它應該切換到顯示記錄並在表格中顯示添加的記錄。目前默認爲隱藏。如何在angularjs中顯示/隱藏div？
這是我的代碼：
<!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();
}
});
這工作謝謝！ –