CODEWITHSUNDEEP
angularjs
Priyanka Khodaskar
Priyanka Khodaskar

Reputation: 57

How to show/hide div in angularjs?

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();
  }

       });

Upvotes: 0

Views: 15929

Answers (2)

Nainish Modi
Nainish Modi

Reputation: 488

I think you should use ng-if directive for performance boost as your HTML seems bigger..what happen if you use ng-show/ng-hide that is ok but these 2 directives will keep your DOM in browser but ng-if will remove DOM from browser and Re-render DOM when conditions get satisfy...hope it make sense

Upvotes: 0

Vincent Venhuizen
Vincent Venhuizen

Reputation: 51

You could make something like this:

In the savebutton:

input type="button" ng-click="AddData(); saved=true;" value="Save Data"/

or in the AddData function add:

$scope.saved = true;

the thing you want to hide:

ng-hide="saved"

or

ng-show="!saved"

or

ng-if="!saved"

Hope this helps.

Upvotes: 5

Related Questions