HOW TO HIDE MODEL IN ANGULAR JS

Anupam Mishra

Total Post:135

Points:949
Posted by  Anupam Mishra
 833  View(s)
Ratings:
Rate this:
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.
  1. Manoj Bhatt

    Post:154

    Points:1086
    Re: How to hide model in Angular JS

    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:



    When we Click Close Button, this model is hide.


      Modified On Apr-11-2018 01:45:04 AM

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!