HOW TO HIDE MODEL IN ANGULAR JS

Anupam Mishra

Total Post:135

Points:949
Posted by  Anupam Mishra
 660  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 Feb-23-2016 11:51:08 PM

Answer

NEWSLETTER

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