current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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.

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

1 Answer 1

up vote 0 down vote

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/

share|improve this answer
    
Still not working. –  Harabati Mar 14 '14 at 13:29
    
updated with a few corrections to your code needed to get minimal functionality –  j.wittwer Mar 14 '14 at 14:37
    
Hi, I am doing the same thing...it hides the first div but doesnt show the second div.. –  Harabati Mar 17 '14 at 6:14
    
My jsfiddle is working.. we must be doing something differently. Can you copy your code to a jsfiddle and share the link? –  j.wittwer Mar 17 '14 at 13:10
    
it worked.. thanks –  Harabati Mar 18 '14 at 6:28

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.