HOW TO USE DIRECTIVES IN ANGULAR JS

Anupam Mishra

Total Post:135

Points:949
Posted by  Anupam Mishra
 545  View(s)
Ratings:
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.
  1. Manoj Bhatt

    Post:154

    Points:1086
    Re: How to use Directives in Angular JS

    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>

     

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!