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
|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-repeatGive 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 PropertiesGive 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 DataGive 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
|$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 DirectivesGive 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 TableGive 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