forum

Home / DeveloperSection / Forums / How to hide model in Angular JS

Ask Question

How to hide model in Angular JS

Anupam Mishra171723-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.
javascriptjavascript html angular js 
Updated on 23-Feb-2016
Anupam Mishra

Anupam Mishra

Follow

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:

<divclass="modal fade"id="Editmodal"tabindex="-1"role="dialog"aria-       labelledby="modalLabel"aria-hidden="true">
 
  <divclass="modal-dialog">
     <divclass="modal-content">
         <divclass="modal-header"style="background-color: #ccc;">
            <buttontype="button"class="close"data-dismiss="modal"><spanaria-hidden="true">×</span><spanclass="sr-only">Close</span></button>
               <h3class="modal-title"id="lineModalLabel2">Edit Records</h3>
                        </div>
           <divclass="modal-body"id="alertcontent2">
                <divstyle="padding-top: 30px"class="panel-body">
                    <divclass="divList">
                        <pclass="divHead">Edit Student</p>
                       <table>
                    <tr>
 
                  <tdstyle="padding-right: 10px;"><b>First Name</b></td>
                     <tdstyle="padding-right: 15px;">
                        <inputtype="text"class="form-control"ng-model="FirstName"/>
                               </td>
                              </tr>
                       <tr>
                   <tdstyle="padding-right: 10px;"><b>Last Name</b></td>
                          <tdstyle="padding-right: 15px;">
                        <inputtype="text"class="form-control"ng-model="LastName"/>
                           </td>
                              </tr>
                       <tr>
                 <tdstyle="padding-right: 10px;"><b>Enrollment Date</b></td>
                    <tdstyle="padding-right: 20px;">
                     <inputtype="text"class="form-control"ng-model="EnrollmentDate"/>
                             </td>
                </tr>
                    <tr>
              <tdcolspan="8"style="padding-top: 20px; text-align: right;">
          <inputtype="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:

answer 1862302114711


When we Click Close Button, this model is hide.


Liked By