Search within TutorialsPark

AngularJS Directives : Template Directives


Learn how to use AngularJS Built-in Template Directives to generate HTML elements using Templates.


AngularJS Directives : Template Directives

The use of data-binding is very much limited, since real applications work with similar data objects and displays different views based on different data.

AngularJS provides a set of directives which are used to generate HTML elements using various types of templates, specifying the pattern.

Template Directives make is easier to work with data collections, by simply setting basic logic upon template which are responsive to the state of Data.

Table : AngularJS Directives Template Directives

Name Description Try It
ng-cloak To apply CSS styles in order to hide binding expression, while expression is being evaluated. Try»
ng-include To include the contents of another file within your own document. Try»
ng-repeat Similar to ng-bind but multiple template expressions can be specified as a value. Try»
ng-repeat-start To specify the start of repeating block having multiple top-level elements
ng-repeat-end To specify the end of repeating block with multiple top-level elements.
ng-switch To change the elements within the Document based of data binding values. Try»

AngularJS Template Directives : Generating Elements Repeatedly

The AngularJS Template Directive of ng-repeat is used to duplicate the element to which is applied.The value for the attribute is specified in form of variable in source . Here source is array or object defined using the controller $scope

The directive loops through the arrays items, creating new instances of the element and the content within it based on the logic defined.The current data object is referred to using the variable name.

Syntax: AngularJS Template Directives Generate Elements Repeatedly using ng-repeat


Example: AngularJS Template Directives Generate Elements Repeatedly using ng-repeat

Give it a TRY! » Note: The element tr and within it td along with the expression within it are generated repeatedly

AngularJS Template Directives : Repeating Object Properties

AngularJS directive of ng-repeat can also be used to repeat the properties of an object, just like it was used to repeat the object within an array in the previous demo.

In the demo, the outer directive ng-repeat is used to generate a tr element for every element within the billPay array, each object is assigned to the variable billNames

The inner directive ng-repeat generates td for each property of the billPay object and assign the value of property to variable billProperties

Example: Angular Template Directive Repeating Object Properties

Give it a TRY! » Note: The Number of properties within the data array are altered, the chages are reflected without changing anything within the HTML.


AngularJS Directives : Repeat using Data Object Keys

The AngularJS Directive of ng-repeat can also be used to create a configuration which gets a key with each property or data object that is evaluated.

In the demo, instead of using a single variable, two comma seperated names are specified within the parentheses.For every property or object evaluated by ng-repeat, a data object or property is assigned to the second variable.

Example: Angular JS Controllers Getting Keys along with Data

Give it a TRY! » Note:The Key is the name of the property, the value is the value of the property.


AngularJS Template Directives : Using Build In Directives

Table : AngularJS Values of Build-in ng-repeat Values

Name Type Description
$index Number Return the position of the elements within the collection. Zero Based
$first Boolean If the current object is first in the collection, true is returned.
$middle Boolean If the current object in neither first nor last element in the collection, true is returned.
$last Boolean If the current object is last in the collection, true is returned.
$even Boolean If the current object is at even position within the collection, true is returned.
$odd Boolean If the current object is at odd position within the collection, true is returned.

The AngularJS Directive of ng-repeat are used to assign values to properties or object, but it also provides a set of built-in variables which can be used to assign additional context to the data.

In the demo, we use the variable $index to show the position of items within the array, an additional column is created to hold this variable.

Example: AngularJS Template Directives Using Built-in Directives

Give it a TRY! » Note: Index values are zero based, hence 1 is added to $index, to count from 1 to n


AngularJS Template Directives : Creating Striped Table using ng-repeat Directives

In the demo below, we use the variable $odd and $even along with directives ng-class to create stripped table, by assigning different colors to alternate table rows.

Example: AngularJS Template Directives Creating Stripped Table

Give it a TRY! » Note: The directive ng-class is used to set class attribute of an element


AngularJS Template Directives : Repeating Multiple Top Level Element.

The AngularJS directive of ng-repeat is used to repeat a single top level element and the contents within it for each and every object/property that is evaluates

But it cannot be used to repeat multiple top level elements for each data object, hence for this very purpose AngularJS provides the directives of ng-repeat-start and ng-repeat-end

The directive ng-repeat-start when configured just like ng-repeat repeats all top level elements until it reaches the element with directive ng-repeat-end

Example: AngularJS Template Directives Repeating Multiple Top Level Elements

Give it a TRY! » Note:For every element in the Array billPay, three items are generated.