AngularJS Directive

Daisy Princess
10y
4.6k
0
1

Article

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:

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Angular Directive</title>
<script src="~/Scripts/angular.js"></script>
<script type="text/javascript">
angular.module("myapp", []).controller("MyController", function ($scope) {
$scope.myData = {};
$scope.myData.text = " Directive Info";
});
</script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController">
<span>Interpolation :- {{myData.text}}</span>
<br />
ng-bind :- <span ng-bind="myData.text"></span>
</div>
</body>
</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:

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Angular Directive</title>
<script src="~/Scripts/angular.js"></script>
<script type="text/javascript">
angular.module("myapp", []).controller("MyController1", function ($scope) {
$scope.myData1 = {};
$scope.myData1.items = [{ CName: "John", Age: 30 }, { CName: "Smith", Age: 23 }, { CName: "Rian", Age: 34 }];
$scope.myData1.getItems = function () { return this.items; };
});
</script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController1">
<h2>Hide Show Data</h2>
<div ng-show="false">
<table border="1">
<tr>
<td>Customer Name</td>
<td>Address</td>
</tr>
<tr ng-repeat="c in myData1.getItems()">
<td>{{c.CName}}</td>
<td><input type="text" name="cname" ng-model="c.Age" /></td>
</tr>
</table>
</div>
</div>
</body>
</html>

Up Next

Ebook Download

View all

AngularJS Recipes

Read by 8.5k people

Download Now!

Learn

View all