Home > DeveloperSection > Forums > How to hide model in Angular JS
Anupam Mishra

Total Post:135

Points:949
Posted on    February-23-2016 10:03 PM

 JavaScript JavaScript  HTML  Angular JS 
Ratings:


 1 Reply(s)
 389  View(s)
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.


Manoj Bhatt
Manoj Bhatt

Total Post:153

Points:1079
Posted on    February-23-2016 11:47 PM

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

Don't want to miss updates? Please click the below button!

Follow MindStick