What is AngularJS Data Binding and Data Binding with Example

What is AngularJS Data Binding and Data Binding with Example

AngularJS Data Binding is the most useful feature and powerful among all the feature of angular js, Databinding basically works as a bridge(connection) between views, model and auto synchronize data between view and model.

Data Binding in AngularJs is use in two different ways ::

One is with ngModel and another use is with Expression.

AngularJS two way binding example below ::

Two Way Binding AngularJS Data Binding Example ::

Two Way Binding AngularJS Data Binding Example :: Here ng-model=”userName” means we have defined name as angular variable with ng-model directive which will set the value of textbox to name variable and being displayed with {{userName}} expression.

following exampole show you Two Way Binding Data Binding Example.

      

        Your Name is  
My Name is {{userName}}

Two Way Binding Expression Concatenates AngularJS Data Binding Example ::

Two Way Binding Expression Concatenates AngularJS Data Binding Example :: Once we start entering users first name and last name in textboxes, it will start binding in the following statement. Data Binding is the powerful feature of AngularJS.

In the following Example the expression {{userfirstName + ‘ ‘ + userlastName}} concatenates firstName and lastName using space(” “) in between Just like javascript expression.

      

        First name 
        Last name 
        My Full Name is {{userfirstName + ' ' + userlastName}}

AngularJS Data Binding with Controller Example ::

Data Binding with Controller Example :: This following example will show us, how to use the controller to change model data(with Data Binding ) using Controller with example.

	
		  


{{userfirstName}}

  Click on "OldName" to run(execute) "userchangeName" function.
		
This example will show you, how to use the controller to change model data using Controller with example.