forum

home / developersection / forums / how to use directives in angular js

Ask Question

How to use Directives in Angular JS

Anupam Mishra 1943 23-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 js javascript  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. *@
                    <div class="container">
                        <div class="col-md-12">
                            <div ng-show="divStudent">
                                <p class="divHead">{{Action}} Student</p>
                                <table>
                                    <tr>
                                        <td style="padding-right: 5px;"><b>Student ID</b></td>
                                        <td style="padding-right: 5px;">
                                                  
                                            <input type="text" class="form-control" ng-                                                                model="StudentID" />
                                        </td>
                                        <td style="padding-right: 5px;"><b>First Name</b></td>
                                        <td style="padding-right: 5px;">
                                            <input type="text" class="form-control" ng-                                                               model="FirstName" />
                                        </td>
                                        <td style="padding-right: 5px;"><b>Last Name</b></td>
                                        <td style="padding-right: 5px;">
                                         <input type="text" class="form-control" ng-                                                         model="LastName" />
                                        </td>
                                        <td style="padding-right: 5px;"><b>Enrollment Date</b>                                              </td>
                                        <td style="padding-right: 5px;">
                                            <input type="text" class="form-control" ng-                                                              model="EnrollmentDate" />
                                        </td>
                                    </tr>
                                    <tr>
                             <input type="button" class="btnAdd btn
btn-primary" value="Save" ng-                                                 click="AddUpdateStudent()" />
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>

 

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy