forum

home / developersection / forums / how to hide model in angular js

Ask Question

How to hide model in Angular JS

Anupam Mishra 1938 23-Feb-2016
Hi All,
I am using angular js in my mvc 4 application .Can anyone give me a solution to how to hide model in Angular js.

Thank you.
javascript javascript  html  angular js 
Updated on 23-Feb-2016
Anupam Mishra

Other

Follow Message
Can you answer this question?
Answer

1 Answers

Manoj Bhatt

Manoj Bhatt

23-Feb-2016
Hi Anupam,
Here we have already a one model "Editmodel". Code is as follows:

<div class="modal fade" id="Editmodal" tabindex="-1" role="dialog" aria-       labelledby="modalLabel" aria-hidden="true">
 
  <div class="modal-dialog">
     <div class="modal-content">
         <div class="modal-header" style="background-color: #ccc;">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
               <h3 class="modal-title" id="lineModalLabel2">Edit Records</h3>
                        </div>
           <div class="modal-body" id="alertcontent2">
                <div style="padding-top: 30px" class="panel-body">
                    <div class="divList">
                        <p class="divHead">Edit Student</p>
                       <table>
                    <tr>
 
                  <td style="padding-right: 10px;"><b>First Name</b></td>
                     <td style="padding-right: 15px;">
                        <input type="text" class="form-control" ng-model="FirstName" />
                               </td>
                              </tr>
                       <tr>
                   <td style="padding-right: 10px;"><b>Last Name</b></td>
                          <td style="padding-right: 15px;">
                        <input type="text" class="form-control" ng-model="LastName" />
                           </td>
                              </tr>
                       <tr>
                 <td style="padding-right: 10px;"><b>Enrollment Date</b></td>
                    <td style="padding-right: 20px;">
                     <input type="text" class="form-control" ng-model="EnrollmentDate" />
                             </td>
                </tr>
                    <tr>
             
<td colspan="8" style="padding-top: 20px; text-align: right;">
          <input type="button" class="btnAdd btn btn-primary" value="Save" ng-click="AddUpdateStudent()" />
    
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
If we want to hide the above model"Edit Model". Now we add one extra line code for hiding the model with creating a Close Button :
  <input type="button" class="btnAdd btn btn-primary" data-dismiss="modal" value="Close" ng-           click="Close()" />

 

Output:

How to hide model in Angular JS


When we Click Close Button, this model is hide.


MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy