Introduction
AngularJS directives are one of the powerful components in AngularJS framework.Directives in AngularJS help us to extend the basic HTML elements and let us reuse the directives in other pages and test it.
Directives in detail with examples
Here we will discuss the directives which are used mostly in our AngularJS application with an example –
ng-repeat
This directive is used to instantiate each item from the collection. One more thing to note here is that, each item will get its own scope and using – “$index” we can get the index of an item in the collection.
Below are some of the properties can be used along with ng-repeat –
Example -
ng-switch
This directive is used to hide and show the HTML element depending on the expression.
Parent element will have directive called – “ng-switch” and the child elements will have – “ng-switch-when”. If the expression is matched, then the HTML element will be displayed. We can define the default element also using directive called – “ng-switch-default”.
Syntax -
Example -
ng-include
This directive is used to include the external HTML file in our AngularJS application. By default, the given template URL will be restricted to fetch from the same domain. But ng-include directive will load the HTML file from other domains as well.
Below are some of the syntaxes to use ng-include in AngularJS application –
Syntax -
“Autoscroll” is also an optional parameter and it evaluates the expression, whether there should be an option to scroll.
Example -
In some cases, we need to add the elements to the page on user actions.
Let us create an example to add a new element to a page -
Example -
Hope this article will help you. Please comment your thoughts below.
AngularJS directives are one of the powerful components in AngularJS framework.Directives in AngularJS help us to extend the basic HTML elements and let us reuse the directives in other pages and test it.
Directives in detail with examples
Here we will discuss the directives which are used mostly in our AngularJS application with an example –
ng-repeat
This directive is used to instantiate each item from the collection. One more thing to note here is that, each item will get its own scope and using – “$index” we can get the index of an item in the collection.
Below are some of the properties can be used along with ng-repeat –
- $index – This will be the index of the item in the item collection.
- $first – This property is used to return the first item from the item collection.This property returns the Boolean. So ideally we can use this in the ng-if directive.
- $last – This property is used to return the last item from the item collection. This property returns the Boolean. So ideally we can use this in the ng-if directive.
- $even - This property is used to return the even value of the $index.This property returns the Boolean. So ideally we can use this in the ng-if directive.
- $odd - This property is used to return the odd value of the $index.This property returns the Boolean. So ideally we can use this in the ng-if directive.
Example -
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myNgRepeatApp" ng-controller="myNgRepeatCtrl">
<div ng-repeat="name in names">
<div ng-class='nameClass(name, $index)' > {{name}}</div>
</div>
<br/>
<br/>
//$first is used to get the first name from the list.
//instead we can use - ng-if="$index > 0".
<div ng-repeat="name in names" ng-if="$first">
<div ng-class='nameClass(name, $index)' > {{name}}</div>
</div>
<br/>
<br/>
//$last is used to get the last name from the list.
//instead we can use - ng-if="$index >names.length - 2".
<div ng-repeat="name in names" ng-if="$last">
<div ng-class='nameClass(name, $index)' > {{name}}</div>
</div>
<script>
var app = angular.module("myNgRepeatApp", []);
app.controller("myNgRepeatCtrl", function($scope) {
$scope.names = [
"John Martin",
"Jack Klop",
"Theo Matty",
"Eart Young",
]
$scope.nameClass = function(item, index){
if(index == 0){
return item;
}
return '';
};
});
</script>
</body>
</html>
ng-switch
This directive is used to hide and show the HTML element depending on the expression.
Parent element will have directive called – “ng-switch” and the child elements will have – “ng-switch-when”. If the expression is matched, then the HTML element will be displayed. We can define the default element also using directive called – “ng-switch-default”.
Syntax -
<element ng-switch="myExpression"> <element ng-switch-when="myvalue"></element> <element ng-switch-when="myvalue"></element> <element ng-switch-default></element> </element>
Example -
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
List of languages are :
<select ng-model="varLang">
<option value="eng"> English </option>
<option value="esp"> Spanish </option>
<option value="hn"> Hindi </option>
<option value="por"> Portugese </option>
<option value="itl"> Italian </option>
</select>
<hr>
<div ng-switch="varLang">
<div ng-switch-when="eng">
<h1> English is my language </h1>
<p> This is my test content in english. </p>
</div>
<div ng-switch-when="esp">
<h1> Spanish is my language </h1>
<p> Este es el contenido de mi ensayo en Inglés. </p>
</div>
<div ng-switch-when="hn">
<h1> Hindi is my language </h1>
<p> यह अंग्रेजी में मेरी परीक्षा सामग्री है. </p>
</div>
<div ng-switch-when="por">
<h1> Portugese is my language </h1>
<p> Este é o meu conteúdo do teste em Inglês. </p>
</div>
<div ng-switch-when="itl">
<h1> Italian is my language </h1>
<p> Questo è il mio test del contenuto in inglese. </p>
</div>
<div ng-switch-default>
<h1>Switch</h1>
<p>Select my language from the dropdown.</p>
</div>
</div>
</body>
</html>
ng-include
This directive is used to include the external HTML file in our AngularJS application. By default, the given template URL will be restricted to fetch from the same domain. But ng-include directive will load the HTML file from other domains as well.
Below are some of the syntaxes to use ng-include in AngularJS application –
Syntax -
<element ng-include="my filename" onload="my expression" autoscroll="my expression" > </element> <ng-include src=" my filename" onload=" my expression" autoscroll=" my expression" > </ng-include>Here my file name will return the file name, “onload” is optional and it will have an expression, which evaluates whether the included file is to be loaded.
“Autoscroll” is also an optional parameter and it evaluates the expression, whether there should be an option to scroll.
Example -
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("myNgIncludeApp", []);
app.controller("myNgIncludeCtrl", function($scope) {
$scope.countries =
[{ name: 'USA', url: 'USA.html'},
{ name: 'UK', url: 'UK.html'}];
$scope.country = $scope.countries[0];
});
</script>
</head>
<body ng-app="myNgIncludeApp">
<div ng-controller="myNgIncludeCtrl">
<select ng-model="country" ng-options="c.name for c in countries">
<option value="">(blank)</option>
</select>
url of the countryName: <code>{{country.name}}</code>
<hr/>
<div class="slide-animate-container">
<div class="slide-animate" ng-include="country.url"></div>
</div>
</div>
</body>
</html>
Create USA.html & UK.html and add some contents to load the page.Dynamically adding elements to the page
In some cases, we need to add the elements to the page on user actions.
Let us create an example to add a new element to a page -
Example -
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('dynamicElementApp', []);
app.controller('dynamicElementCtrl', function($scope) {
$scope.myItems = [];
$scope.newitemsToAdd = [{
firstName: '',
lastName: ''
}];
//Method to add an item.
$scope.add = function(newitemToAdd) {
var index = $scope.newitemsToAdd.indexOf(newitemToAdd);
$scope.newitemsToAdd.splice(index, 1);
$scope.myItems.push(angular.copy(newitemToAdd))
}
//Method to add a new item to a page.
$scope.addNew = function() {
$scope.newitemsToAdd.push({
firstName: '',
lastName: ''
})
}
});
</script>
</head>
<body ng-app="dynamicElementApp" ng-controller="dynamicElementCtrl">
<div ng-repeat="myItem in myItems">
{{myItem.firstName}} {{myItem.lastName}}
</div>
//Displaying the already added items.
<div ng-repeat="newitemToAdd in newitemsToAdd">
<input type="text" ng-model="newitemToAdd.firstName" />
<input type="text" ng-model="newitemToAdd.lastName" />
<button ng-click="add(newitemToAdd)">Add</button>
</div>
<div>
<button ng-click="addNew()">Add new</button>
</div>
</body>
</html>
Hope this article will help you. Please comment your thoughts below.
