Post
Ask Question

List of AngularJS Directives

The following is the list of most commonly used AngularJS directives with their examples.

The examples of above codes are as follow:

  • Ng-app

    It can be used with body tag or div tag to define the module.
    1. <body ng-app="myapp" ng-controller="ctrl">  
  • Ng-Bind

    Example:
    1. <body ng-app="myapp" ng-controller="ctrl">  
    2. {{studentname}}  
    3.   
    4. <script>  
    5. angular.module('myapp', []).controller('ctrl', function ($scope) {  
    6. $scope.studentname = "Nikhil";  
    7. });  
    8. </script>  
    9. </body>  
  • Ng-bind-template

    Example:
    1. <div ng-app="myApp" ng-bind-template="{{firstName}} {{lastName}}" ng-controller="myCtrl"></div>  
    2.   
    3. <script>  
    4. var app = angular.module("myApp", []);  
    5. app.controller("myCtrl", function($scope) {  
    6. $scope.firstName = "Nikhil";  
    7. $scope.lastName = "kAPOOR";  
    8. });  
    9. </script>  
  • Ng-change
    1. <body ng-app="myApp">  
    2. <div ng-controller="myCtrl">  
    3. <input type="text" ng-change="myFunc()" ng-model="myValue" />  
    4. </div>  
    5.   
    6. <script>  
    7. angular.module('myApp', [])  
    8. .controller('myCtrl', ['$scope', function($scope) {  
    9. $scope.myFunc = function() {  
    10. alert($scope.myValue);  
    11. };  
    12. • }]);  
    13. </script>  
    14. </body> 
  • Ng-checked/Ng-required
    1. <input type="checkbox" ng-checked=true ng-required>Uncheck Me!</input> 
  • Ng-Class
    1. <style>  
    2. .world {  
    3. background-color: lightblue;  
    4. }  
    5.   
    6. .earth {  
    7. background-color: coral;  
    8. }  
    9. </style>  
    10. <body ng-app="">  
    11. <select ng-model="home">  
    12. <option value="world">Blue</option>  
    13. <option value="earth">Orange</option>  
    14. </select>  
    15.   
    16. <div ng-class="home">  
    17. <h1>Choose from option to change color</h1>  
    18. <p></p>  
    19. </div>  
  • Ng-cloak
    1. <body ng-app="" ng-cloak>  
  • Ng-click
    1. <body ng-app="myApp">  
    2. <div ng-controller="myCtrl">  
    3. <input type="button" ng-change="myFunc()"/>  
    4. </div>  
    5. <script>  
    6. angular.module('myApp', [])  
    7. .controller('myCtrl', ['$scope', function($scope) {  
    8. $scope.myFunc = function() {  
    9. alert(“Function Called”);  
    10. };  
    11. }]);  
    12. </script>  
  • Ng-controller
    1. <body ng-app="myapp" ng-controller="ctrl">  
  • Ng-disabled
    1. <input type="button" ng-change="myFunc()" ng-disabled="true" />  
  • Ng-include
    1. <div ng-include="'myFile.htm'"></div>  
  • Ng-init
    1. <div ng-init="firstName='nikhil'">  
    2. {{firstname}}  
    3. </div> 
  • Ng-if /Ng-model
    1. Show Text <input type="checkbox" ng-model="showtext" ng-init="showtext= true">  
    2.   
    3. <div ng-if="showtext">  
    4. <h1>Welcome</h1>  
    5. </div>  
  • Ng-repeat
    1. <tr ng-repeat="x in name ">  
    2. <td>   
    3. {{x}}  
    4. </td>  
    5. </tr>  
  • Ng-hide/Show
    1. <div ng-app="">  
    2.   
    3. <p ng-show="true">I am visible.</p>  
    4.   
    5. <p ng-show="false">I am not visible.</p>  
    6.   
    7. </div>  
  • Ng-src
    1. <img ng-src="img.png"></img>  
  • Ng-switch
    1. <select ng-model="myVar">  
    2. <option value="1">1  
    3. <option value="2">2  
    4. </select>  
    5.   
    6. <div ng-switch="myVar">  
    7. <div ng-switch-when="1">  
    8. <h1>1</h1>  
    9. </div>  
    10. <div ng-switch-when="2">  
    11. <h1>2</h1>  
    12.   
    13. </div>  
  • Ng-minlength/Ng-Maxlength
    1. <input type="text" name="name" ng-minlength=0 ng-maxlength=5 />  
  • Ng-options
    1. <select ng-model="selectedName" ng-options="item for item in names"></select>  
    Thanks for reading the article, Happy Coding !!