Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

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

How to use Directives in Angular JS

Anupam Mishra 2234 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 javascriptangular jsangularjs directive
Updated 24 Feb 2016
Anupam Mishra
Anupam Mishra

Other

Message

1 Answers

Manoj Bhatt
Manoj Bhatt 24 Feb 2016
Report Abuse
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>

 

advertising