AngularJS Directives and Data Binding Example Tutorial

Filed Under: AngularJS

In the previous post, we have successfully created and run our first angular application. Now, we are going to look in to the components used to create an angular application. In this post, we will discuss about Directives, which is one of the core features in AngularJS. From there, we will also look into the Data Binding concepts.

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.


<ng-bind></ng-bind>
<span ng-bind="exp"></span>
<span class="ng-bind: exp;"></span>
<!-- directive: ng-bind exp -->

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:


Name: <input type="text" ng-model="name">
<span ng-bind="name"></span>

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


 <div ng-app>
Name: <input type="text" ng-model="name">
  <span ng-bind="name"></span>

  <span ng:bind="name"></span>

  <span ng_bind="name"></span>

  <span data-ng-bind="name"></span>

  <span x-ng-bind="name"></span>
</div>

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


<!DOCTYPE html>
<html lang="en">
<title>Angular Directives</title>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>
<div ng-app>

   <p>Enter Some text : <input type="text" ng-model="name"></p>

   <p>Hello {{name}}!</p>

</div>

</body>
</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


<!DOCTYPE html>
<html>
<title>Angular Directives - ng-int and ng-repeat</title>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body ng-app>

    <div ng-init="players = [{name:'Rooney', country:'England'}, 
				{name:'Neymar', country:'Brazil'},
				{name:'Messy', country:'Arjentina'}]">

    <p>Name : <input type="text" ng-model="name"> {{name}}</p>

    <ul>
        <li ng-repeat="player in players">
         [{{$index}}] {{player.name}} : {{player.country}}
        </li>
    </ul>
    </div>

</body>
</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



<!DOCTYPE html>
<html  ng-app>
<head>
<title> ng-hide and ng-show Directives</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

</head>

<body ng-app>


   <p>Enter the Name as <b>JournalDev</b> in the input field to demonstrate ng-show.</p>
   <p>Enter anything n in the input field to demonstrate ng-hide.</b></p>
   <p>	
  	<b>
	Enter Blog's Name: <input type="text" ng-model="name">

  	<div ng-show="name =='JournalDev'"> Happy Learning!</div>

  	<div ng-hide="!name == ''"> Welcome to JournalDev.</div>
	</b>
  </p>

</body>
</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.

Comments

  1. Pankaj Pushp says:

    Comment is not mandatory…still we get error in case of blank .

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages