Products

Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller

Developer

Article Blog Forum Interview Beginner News Startup Quiz

Users

Career

Apply Job Internship

Pricing

Login Sign Up Get a Quote

How to hide model in Angular JS

Anupam Mishra 2066 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.

Anupam Mishra

Other

1 Answers

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:

When we Click Close Button, this model is hide.

advertising