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.



    Welcome in the Data Binding - onlinecode
    



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.



    Two Way Binding Expression Concatenates Data Binding Example - onlinecode
    



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.


	
		Data Binding with Controller Example - onlinecode
		
		
	

{{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.

Leave a Comment

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

  +  2  =  5

We accept paid advance and paid guest Posting on our Site : Contact US