-1
Ich versuche, das div in Tabview zu verstecken und nach dem Klicken auf Speichern Schaltfläche möchte ich div. Wie kann ich das bekommen? Im folgenden Code, wenn ich auf Daten speichern von Add Records Registerkarte klicken wird, um Datensätze anzuzeigen und hinzugefügte Datensätze in der Tabelle angezeigt werden soll. das ist jetzt standardmäßig ausgeblendet.Wie div in angularjs anzeigen/ausblenden?
Dies ist mein 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();
}
});
Dies funktioniert Danke! –