AngularJS Data Binding - Data binding in AngularJS is the synchronization between the model and the view. You can use double braces {{ }} to display content from the model.
Example 1: Calculate Arithmetic Sum using Angular Expression.
<body ng-app>
<div>
10+20={{10+20}}
</div>
<div>
10+50={{10+50}}
</div>
</body>
ng-app is a directive
{{10+20}} is a binding expression.
Example 2: Input Name and Display Output using AngularJS Expression.
<body ng-app>
<div>
<p>Enter Name <input type="text" ng-model="name"> </p>
<p>Welcome {{name}} </p>
</div>
</body>
Example 3: Input Name and Display Output using AngularJS Directive.
<body ng-app>
<div>
<p>Enter Name <input type="text" ng-model="name"> </p>
<p>Welcome <span ng-bind="name"> </p>
</div>
</body>
Note: The Output of Example 2 and 3 is same only the difference is that, Example 2 is used using AngularJS Expression and in Example 3, AngularJS Directive is used to display the output.
The ng-app directive defines an AngularJS application.
The ng-model directive binds the value of HTML control to application data.
The ng-bind directive binds application data to the HTML view. The HTML container where the AngularJS application is displayed, is called the view. The view has access to the model, and there are several ways of displaying model data in the view. You can use the ng-bind directive, which will bind the innerHTML of the element to the specified model property or You can also use double braces {{ }} to display content from the model.
Example 4: AngularJS Number. Declare 2 variables and multiple them.
<div ng-app="" ng-init="quantity=2;cost=10;">
<p>Total Amount = {{ quantity * cost }}</p>
</div>
OR
<div ng-app="" ng-init="quantity=2;cost=10;">
<p>Total Amount = <span ng-bind="quantity * cost"></p>
</div>
Example 5: AngularJS Strings. Initialize first name, last name and display it.
<div ng-app="" ng-init="firstName='Misko';lastName='Hevery';">
<p>AngularJS is Developed By: {{ firstName + " " + lastName }}</p>
</div>
Example 6: AngularJS Object. Initialize multiple variables in one object and display it.
<div ng-app="" ng-init="person={firstName:'Misko',lastName:'Hevery', designation:'Developer'}">
<p>Name is {{ person.firstName}} {{person.lastName }}</p>
<p>Designation is {{ person.designation }}</p>
</div>
Example 7: AngularJS Arrays. Initialize multiple color value in array and display it.
<div ng-app="" ng-init="color=['Red','Green','Blue']">
<p>The 2nd Color in a Array is {{ color[1] }}</p>
</div>
Example 8: Change the textbox background color.
<div ng-app="" ng-init="color='pink'">
<p>Enter the color name in textbox, it will change the textbox background color as you type.</p>
<input type="text" ng-model="color" value="{{color}}" style="background:{{color}}">
</div>