Angularjs Examples

AJS Examples


AngularJS Directives Reference

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.

AngularJS Directives Reference

DirectivesDescriptionSee Live Example
ng-appIt is added to set the AngularJS section.Try Now
ng-initIt sets default variable value.Try Now
ng-bindIt is an alternative to {{ }} template.Try Now
ng-bind-templateIt binds multiple expressions to the view.Try Now
ng-non-bindableIt used to not to bind data.Try Now
ng-bind-htmlIt used to bind inner HTML property of an HTML element.Try Now
ng-changeIt evaluates specified expression when the user changes the input.Try Now
ng-checkedIt is used to set checkbox checked.Try Now
ng-classIt is used to the css class dynamically.Try Now
ng-cloakIt is usedv to prevent displaying the content until AngularJS has taken control.Try Now
ng-clickIt is used to execute a method or expression when element is clicked.Try Now
ng-controllerIt is used to attach a controller class to the view.Try Now
ng-disabledIt is used to attach disabled attributes to the form element.Try Now
ng-formIt is used to set form within a form.Try Now
ng-hrefIt is used to dynamically bind AngularJS variables to the href attribute.Try Now
ng-includeIt is used to fetch, compile and include an external HTML fragment to your page.Try Now
ng-ifIt is used to remove or recreate an element in the DOM depending on an expressionTry Now
ng-switchIt is used to conditionally switch control based on matching expression.Try Now
ng-modelIt is used to bind an input,select, textarea etc elements with model property.Try Now
ng-readonlyIt is used to set readonly attribute to an element.Try Now
ng-repeatIt is used to loop through each item in collection to create a new template.Try Now
ng-selectedIt is used to set selected option in <select> element.Try Now
ng-show/ng-hideIt workes based on expression, if true then the element is shown or hidden respectively.Try Now
ng-srcIt is used to dynamically bind AngularJS variables to the src attribute.Try Now
ng-submitIt is used to bind angular expressions to onsubmit events.Try Now
ng-maxlengthIt is used to adds the maxlength validator to ngModel.Try Now
ng-minlengthIt is used to adds the minlength validator to ngModel.Try Now
ng-classevenIt works in conjunction with ngRepeat and take effect only on odd (even) rows.Try Now
ng-classoddIt works in conjunction with ngRepeat and take effect only on odd (even) rows.Try Now
ng-patternIt is used to add the pattern validator to ngModel.Try Now
ng-cutIt is used to specify custom behavior on cut event.Try Now
ng-copyIt is used to specify custom behavior on copy event.Try Now
ng-pasteIt is used to specify custom behavior on paste event.Try Now
ng-styleIt is used to set CSS style on an HTML element conditionally.Try Now
ng-optionsIt is used to dynamically generate a list of <option> elements for the <select> element.Try Now
ng-listIt is used to convert string into list based on specified delimiter.Try Now
ng-openIt is used to set the open attribute on the element, if the expression inside ngOpen is truthy.Try Now
ng-transcludeIt is used to mark the insertion point for the transcluded DOM.Try Now
ng-requiredIt is used to bind angular expressions to onsubmit events.Try Now
ng-valueIt is used to bind angular expressions to the value of <option>.Try Now