Home > DeveloperSection > Forums > How to use Directives in Angular JS
Anupam Mishra

Total Post:135

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

 Angular JS JavaScript  Angular JS  Angularjs Directive 
Ratings:


 1 Reply(s)
 288  View(s)
Rate this:
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.


Manoj Bhatt
Manoj Bhatt

Total Post:153

Points:1079
Posted on    February-24-2016 12:10 AM

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>

 


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

Follow MindStick