我试图在tabview中隐藏div，然后点击“保存”按钮后我想显示该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();
}
});
答案 0 :(得分：1)
你可以做这样的事情：
在保存按钮中：
input type="button" ng-click="AddData(); saved=true;" value="Save Data"/
或在AddData函数中添加：
$scope.saved = true;
你要隐藏的东西：
ng-hide="saved"
或
ng-show="!saved"
或
ng-if="!saved"
希望这有帮助。
答案 1 :(得分：0)
我认为你应该使用ng-if指令来提升性能，因为你的HTML看起来更大......如果你使用ng-show / ng-hide就可以了，但是这两个指令会让你的DOM保持在浏览器中但是ng-如果将从浏览器中删除DOM并在条件满足时重新渲染DOM ...希望它有意义