show a div on a button click using angularjs and HTML

Question

I want to show a div on a button click using angularjs and HTML I am learning angularJs. I want to design a webpage in which on click of 'Add' button a div(EmployeeInfoDiv) is shown. When I fill the textboxes in it and save it the data should reflect in table within the div(EmpDetTable).

Here is the HTML page code:

<body ng-app="MyApp">
 <div ng-controller="EmpDetCtrl">       
    <div ng-model="EmpDetTable" class="container body"  ng-hide="addEmp">

        <label class="TabHeadings">Employee Details</label>
        <div class="EmployeeInfo">

            <table ng-model="Employee" border="1">
                <thead><tr><th>Name</th><th>Designation</th><th>Salary</th></tr></thead>
                <tbody>
                    <tr ng-repeat="emp in employees">
                        <td>{{emp.name}}</td>
                        <td>{{emp.desg}}</td>
                    </tr>
                </tbody>
            </table>
            <button ng-model="AddEmp" ng-click="ShowAddEmployee()">Add</button> 
        </div>
      </div>
    <div ng-model="EmployeeInfoDiv" class="popover right EmployeeInfo" style="width:1500px;"  ng-show="addEmp" >
     <label class="TabHeadings" style="width:830px;">Employee Details</label>

    <div class="EmployeeInfo">
            <table>
                <tr><td><label class="table_label">Name:</label></td><td><input type="text" ng-model="name" class="textbox"/></td>
                <td><label  class="table_label">Designation:</label></td><td><input type="text" ng-model="desg" class="textbox"/></td>
                </tr>

            </table>
            <div ng-model="botton_container">
                <button ng-model="save" class="save_buttons" ng-click="SaveData();">Save</button> 
                <button ng-model="cancel" class="cancel_buttons"  ng-click="ShowViewEmployee();">Cancel</button>
            </div> 

        </div>
   </div>

</div>  
</body>

Controller Code:

 function EmpDetCtrl($scope) {

   $scope.employees = [
   { name: 'A',desg: 'C'}

   ];

   $scope.addNew = function () {
    $scope.employees.push({
        name: $scope.name,desg: $scope.desg
     });
    }

  $scope.ShowAddEmployee= function () {
    return $scope.EmployeeInfoDiv=true;
   }

  $scope.ShowViewEmployee=function () {
      return $scope.EmployeeInfoDiv = false;
  }

}

I don't know whether this code is correct or not. I just tried it. Can anyone please help me out. Thanks in advance.

Can you post the code in your 'EmpDetCtrl' controller or create a fiddle for this task ? — Ren
– Ren, Commented Mar 14, 2014 at 10:32
Have a look at the angularjs Todo App. This should do exactly what you want. — schacki
– schacki, Commented Mar 14, 2014 at 11:04
you seem to be doing it right. +1 on the controller code request. — Eliran Malka
– Eliran Malka, Commented Mar 14, 2014 at 12:29
ok, please see updated answer with link to functioning jsfiddle. — j.wittwer
– j.wittwer, Commented Mar 14, 2014 at 16:18

j.wittwer · Accepted Answer · 2014-03-14 16:17:30Z

1

Your ng-click is updating the EmployeeInfoDiv variable. So, reference that in ng-show and ng-hide:

<div ng-hide="EmployeeInfoDiv" class="container body">
...
<div ng-show="EmployeeInfoDiv" class="popover right EmployeeInfo" style="width:1500px;">

You do not need ng-model in the div to make that work. ng-model="EmployeeInfoDiv"

Update
A few more issues. Most important is that (at least in the code posted) MyApp isn't defined anywhere, and your controller is defined on the global scope. So you need to change your html to:

<div ng-app>
<div ng-controller="EmpDetCtrl"> 
...

However, note that this is not the recommended method. See the angular documentation for controllers.

Here is a working demo: http://jsfiddle.net/wittwerj/xrB77/

edited Mar 14, 2014 at 16:17

answered Mar 14, 2014 at 13:24

j.wittwer

9,4973 gold badges32 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

j.wittwer Over a year ago

updated with a few corrections to your code needed to get minimal functionality

Harabati Over a year ago

Hi, I am doing the same thing...it hides the first div but doesnt show the second div..

j.wittwer Over a year ago

My jsfiddle is working.. we must be doing something differently. Can you copy your code to a jsfiddle and share the link?

Collectives™ on Stack Overflow

show a div on a button click using angularjs and HTML

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related