forum

Home / DeveloperSection / Forums / How to use Directives in Angular JS

Ask Question

How to use Directives in Angular JS

Anupam Mishra189223-Feb-2016
Hi everyone,
i have declare a one text box. Code is below:
 <input type="text" name="UserName">
I want to declare same text box as a Angular JS directives in my application . Please can anyone give me solution.

Thank you.
angular jsjavascript angular js angularjs directive 
Updated on 24-Feb-2016
Anupam Mishra

Anupam Mishra

Follow

Can you answer this question?

Answer

1 Answers

Manoj Bhatt

Manoj Bhatt

24-Feb-2016
Hi Anupam,
You are using a html code for creating a textbox.So now,we are using Directives in the above  code is as follows:
Directives in Angular JS:  AngularJS directives allow the developer to specify custom and reusable HTML-like elements and attributes that define data bindings and the behavior of presentation components.
 @*Here we are using a various directives such as-ng-show,ng-repeat,ng-class,ng-                                               Controller etc. *@
                    <divclass="container">
                        <divclass="col-md-12">
                            <divng-show="divStudent">
                                <pclass="divHead">{{Action}} Student</p>
                                <table>
                                    <tr>
                                        <tdstyle="padding-right: 5px;"><b>Student ID</b></td>
                                        <tdstyle="padding-right: 5px;">
                                                  
                                            <inputtype="text"class="form-control"ng-                                                                model="StudentID"/>
                                        </td>
                                        <tdstyle="padding-right: 5px;"><b>First Name</b></td>
                                        <tdstyle="padding-right: 5px;">
                                            <inputtype="text"class="form-control"ng-                                                               model="FirstName"/>
                                        </td>
                                        <tdstyle="padding-right: 5px;"><b>Last Name</b></td>
                                        <tdstyle="padding-right: 5px;">
                                         <inputtype="text"class="form-control"ng-                                                         model="LastName"/>
                                        </td>
                                        <tdstyle="padding-right: 5px;"><b>Enrollment Date</b>                                              </td>
                                        <tdstyle="padding-right: 5px;">
                                            <inputtype="text"class="form-control"ng-                                                              model="EnrollmentDate"/>
                                        </td>
                                    </tr>
                                    <tr>
                             <inputtype="button"class="btnAdd btn btn-primary"value="Save"ng-                                                 click="AddUpdateStudent()"/>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>

 

MindStick Training

Liked By