Post
Ask Question

AngularJS Directive

In AngularJS, the view is basically mixed with the model in the HTML Template. We can use AngularJS directives to decide how the data mixes with HTML. In AngularJS, there are multiple directives for this purpose. They are:

  • Interpolation Directive
  • ng-Bind Directive
  • ng-Show Directive
  • ng-Hide Directive
  • Repeat Directive

Interpolation Directive

The interpolation directive is one of the basic fundamental directives in AngularJS. The interpolation directive inserts the result into the HTML template as {{ }} notation. 

ng-Bind Directive

The ng-bind directive is an alternative to the interpolation directive. You can use it by using the ng-bind attribute of the HTML tag. The following is the example for these:

  1. @{  
  2.     Layout = null;  
  3. }  
  4.   
  5. <!DOCTYPE html>  
  6.   
  7. <html>  
  8. <head>  
  9.     <meta name="viewport" content="width=device-width" />  
  10.     <title>Angular Directive</title>  
  11.     <script src="~/Scripts/angular.js"></script>  
  12.   
  13.     <script type="text/javascript">  
  14.         angular.module("myapp", []).controller("MyController", function ($scope) {  
  15.             $scope.myData = {};  
  16.             $scope.myData.text = " Directive Info";  
  17.         });  
  18.           
  19.     </script>  
  20.   
  21. </head>  
  22. <body ng-app="myapp">  
  23.     <div ng-controller="MyController">  
  24.             <span>Interpolation :- {{myData.text}}</span>  
  25.             <br />  
  26.             ng-bind :- <span ng-bind="myData.text"></span>  
  27.         </div>  
  28. </body>  
  29. </html>  

In AngularJS, you can show or hide any HTML element on the basis of model data. For doing these, you need to use a conditional directive in AngularJS, as in the following:

ng-Show Directive

ng-Hide Directive

The preceding directives are used to show or hide any HTML element in the views. These two directives do the opposite of each other.

Repeat Directive

The ng-repeat directive is generally used based on a collection of objects and it converts the item value in the specified HTML elements.

The following example shows both of the ng-show/ng-hide directives and the repeat directive:
  1. @{  
  2.     Layout = null;  
  3. }  
  4.   
  5. <!DOCTYPE html>  
  6.   
  7. <html>  
  8. <head>  
  9.     <meta name="viewport" content="width=device-width" />  
  10.     <title>Angular Directive</title>  
  11.     <script src="~/Scripts/angular.js"></script>  
  12.   
  13.     <script type="text/javascript">  
  14.                angular.module("myapp", []).controller("MyController1", function ($scope) {  
  15.             $scope.myData1 = {};  
  16.             $scope.myData1.items = [{ CName: "John", Age: 30 }, { CName: "Smith", Age: 23 }, { CName: "Rian", Age: 34 }];  
  17.             $scope.myData1.getItems = function () { return this.items; };  
  18.         });  
  19.     </script>  
  20.   
  21. </head>  
  22. <body ng-app="myapp">  
  23.         <div ng-controller="MyController1">  
  24.         <h2>Hide Show Data</h2>  
  25.         <div ng-show="false">  
  26.             <table border="1">  
  27.                 <tr>  
  28.                     <td>Customer Name</td>  
  29.                     <td>Address</td>  
  30.                 </tr>  
  31.                 <tr ng-repeat="c in myData1.getItems()">  
  32.                     <td>{{c.CName}}</td>  
  33.                     <td><input type="text" name="cname" ng-model="c.Age" /></td>  
  34.                 </tr>  
  35.             </table>  
  36.         </div>  
  37.     </div>  
  38. </body>  
  39. </html>  


Similar Articles