Learn how to use AngularJS Directives to extend HTML elements attributes. Binding data to HTML elements, hiding and showing elements, add events to HTML elements and manipulating DOM HTML elements. Complete reference of AngularJS Directives.
Directives | Description | See Live Example |
---|---|---|
ng-app | It is added to set the AngularJS section. | Try Now |
ng-init | It sets default variable value. | Try Now |
ng-bind | It is an alternative to {{ }} template. | Try Now |
ng-bind-template | It binds multiple expressions to the view. | Try Now |
ng-non-bindable | It used to not to bind data. | Try Now |
ng-bind-html | It used to bind inner HTML property of an HTML element. | Try Now |
ng-change | It evaluates specified expression when the user changes the input. | Try Now |
ng-checked | It is used to set checkbox checked. | Try Now |
ng-class | It is used to the css class dynamically. | Try Now |
ng-cloak | It is usedv to prevent displaying the content until AngularJS has taken control. | Try Now |
ng-click | It is used to execute a method or expression when element is clicked. | Try Now |
ng-controller | It is used to attach a controller class to the view. | Try Now |
ng-disabled | It is used to attach disabled attributes to the form element. | Try Now |
ng-form | It is used to set form within a form. | Try Now |
ng-href | It is used to dynamically bind AngularJS variables to the href attribute. | Try Now |
ng-include | It is used to fetch, compile and include an external HTML fragment to your page. | Try Now |
ng-if | It is used to remove or recreate an element in the DOM depending on an expression | Try Now |
ng-switch | It is used to conditionally switch control based on matching expression. | Try Now |
ng-model | It is used to bind an input,select, textarea etc elements with model property. | Try Now |
ng-readonly | It is used to set readonly attribute to an element. | Try Now |
ng-repeat | It is used to loop through each item in collection to create a new template. | Try Now |
ng-selected | It is used to set selected option in <select> element. | Try Now |
ng-show/ng-hide | It workes based on expression, if true then the element is shown or hidden respectively. | Try Now |
ng-src | It is used to dynamically bind AngularJS variables to the src attribute. | Try Now |
ng-submit | It is used to bind angular expressions to onsubmit events. | Try Now |
ng-maxlength | It is used to adds the maxlength validator to ngModel. | Try Now |
ng-minlength | It is used to adds the minlength validator to ngModel. | Try Now |
ng-classeven | It works in conjunction with ngRepeat and take effect only on odd (even) rows. | Try Now |
ng-classodd | It works in conjunction with ngRepeat and take effect only on odd (even) rows. | Try Now |
ng-pattern | It is used to add the pattern validator to ngModel. | Try Now |
ng-cut | It is used to specify custom behavior on cut event. | Try Now |
ng-copy | It is used to specify custom behavior on copy event. | Try Now |
ng-paste | It is used to specify custom behavior on paste event. | Try Now |
ng-style | It is used to set CSS style on an HTML element conditionally. | Try Now |
ng-options | It is used to dynamically generate a list of <option> elements for the <select> element. | Try Now |
ng-list | It is used to convert string into list based on specified delimiter. | Try Now |
ng-open | It is used to set the open attribute on the element, if the expression inside ngOpen is truthy. | Try Now |
ng-transclude | It is used to mark the insertion point for the transcluded DOM. | Try Now |
ng-required | It is used to bind angular expressions to onsubmit events. | Try Now |
ng-value | It is used to bind angular expressions to the value of <option>. | Try Now |