HOW TO USE DIRECTIVES IN ANGULAR JS

Anupam Mishra

Total Post:135

Points:949
Posted by  Anupam Mishra
 705  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>

     

      Modified On Apr-11-2018 01:45:53 AM

Answer

NEWSLETTER

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