AngularJS Directives and Data Binding Example Tutorial [Latest]

Contents

Directives and Data Binding concepts

Directives in AngularJS extend HTML with new behavior. They teach HTML new techniques and can be placed in attributes, element names, class names and comments. For example, we can use the ngBind directive in the following ways.

We have used some of the directives like ng-app, ng-bind and ng-model in our previous post. Generally, directives are prefixed with ng-.

In the following example, we can say that span element matches ngbind directive:

We can also use the following equivalent forms that matches the ngBind directive:

In this tutorial, we will mention some of the directives that are commonly used in every angular application and its usage. You can also go through the AngularJS official API documentation for more details.

Data Binding

Data Binding is the automatic synchronization of View and Model. Most of the template systems support data binding in single direction only. That is, the change in model or other section of the view is not automatically projected in the view or vice versa. In angular, this works differently: Any change in model is reflected in the view and vice versa.

Directives and Data Binding Examples

In this section, we will try different examples to explore some of the directives and data binding concepts. You can find a list of all directives in the official API documentation.

Using ngApp and ngModel directives

We have already seen these concepts in the previous post. Let’s recall that application to demonstrate the use of directives like ng-app, ng-model and how data binds to the view. The following example demonstrates the Directives and Data Binding concepts.

directives-binding.html

The directive ng-model makes a property up in the memory called “name” and we can bind to that value using the double braces “{{“. In this example, you can see how the model value is wrapped inside the binding expression {{name}}.

Using ngInit and ngRepeat directives

ng-init :  This directive is used to initialize the data.

ng-repeat : This directive is used to iterate over a collection of data. Each looping instance gets its own scope and the given variable will hold the value of the current item. The ng-repeat directive exposes several properties like $index, $first, $last, $even, $odd and $middle to each instance.

• $index property is set to the index of the current item in the collection.
• $first property returns true if the repeated element is first in the iterator.
• $last property returns true if the repeated element is last in the iterator.
• $middle property returns true if the repeated element is between the last and first element in the iterator.
• $even property returns true if the iterator position $index is even.
• $odd property returns true if the iterator position $index is odd.

The following example demonstrates the ng-init and ng-repeat directives usage.

directives-binding.html

In this example, ng-init directive is used to initialize an array of objects called players. The ng-repeat directive iterates over this collection and for each instance, the variable player is set with the current item in the collection and it is displayed using the binding expression {{player.name}} : {{player.country}}. You can also see the index of each item, here the $index property is set to the current item index.

You will see the following output in your browser.

Using ngHide and ngShow Directives

ng-show :This directive is used to display or hide the given HTML element based on the expression given to the ng-show attribute. ng-hide :This directive is used to display or hide the given HTML element based on the expression given to the ng-hide attribute. The following example demonstrates the ng-hide and ng-show directives usage. You could see the welcome text disappears as you type, this is because of the ng-hide directive ng-hide="!name == ''" When you enter the Blog’s name as ‘JournalDev’, a text showing “Happy Learning!” is displayed, this is becuase of the ng-show directive ng-show="name =='JournalDev'"

directives-hide-show.html

You will see the following output in your browser.

In this tutorial, we have explained some of the directives in AngularJS and the Data Binding concept. That’s all for now and we will look into the AngularJS Controller feature in the coming post.