AngularJs Data Binding Example | ng-model in Angular Example Tutorials

PROGRAMMINGJava ExamplesC Examples
Java Examples
C Examples
C Tutorials
aws
JAVAEXCEPTIONSCOLLECTIONSSWINGJDBC
EXCEPTIONS
COLLECTIONS
SWING
JDBC
JAVA 8
SPRING
SPRING BOOT
HIBERNATE
PYTHON
PHP
JQUERY
PROGRAMMINGJava ExamplesC Examples
Java Examples
C Examples
C Tutorials
aws
One of the important feature of AngularJs is Data Binding. Data binding makes the AngularJs application synchronisation, that means it maintains the sync between the model and view.
Data binding is used to bind the data between the ui (html elements) and AngularJs controller variables.
AngularJs application maintains the Data models to represents the data. Typically these Data Models are consisting with data.
Example of AngularJs Data Modal:
var app = angular.module('dataController', []);
app.controller('dataController', function($scope) {
$scope.firstname = "Chandra Shekhar";
$scope.lastname = "Goka";
});
The above example represents a typical data model in AngularJs. This data would be bind with the corresponding html elements. So that when ever any changes made on any data member from controller, it will automatically effected on the view.
Here the communication is happening between the controller and view because of $scope object. $scope is acts as a mediator between the controller and view.
AngularJs supports two types of Data Binding :
One-way Binding
Two-way Binding
In one-way binding the Data will be updated from the controller. When ever the values changed in Angular controller the corresponding html elements (input, select, textarea) will be updated accordingly. Here is no need of getter and setters like legacy Javascript and JQuery stuff.
Here the binding, data will taking from the controller variables and updated on html elements.
This will happen by making use of either AngularJs Expressions {{}} or ng-bind AngularJs directive.
<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <body>
        <div ng-app="myApp" ng-controller="expCtrl">
            <p>First name: <b>{{firstname}}</b>
            </p> 
        </div> 
        <script>
            var app = angular.module('myApp', []);
            app.controller('expCtrl', function ($scope) {
                $scope.firstname = "Chandra";
            });
        </script> 
        <p>Here the binding happening from controller.</p> 
    </body> 
</html>
Output :
[advanced_iframe securitykey=”85899c43cd5d45b9ec5729b5189d1961d89f90d9′′ src=”https://www.onlinetutorialspoint.com/AngularJsExamples/AngularJs_Binding_Expression.html”]
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>
    <div ng-app="myApp" ng-controller="bindCtrl">
        <p>First name: <b ng-bind="firstname"></b></p>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('bindCtrl', function($scope) {
            $scope.firstname = "Chandra";
        });
    </script>
    <p>Here the binding happening from controller.</p>
</body>

</html>
Output :
[advanced_iframe securitykey=”85899c43cd5d45b9ec5729b5189d1961d89f90d9′′ src=”https://www.onlinetutorialspoint.com/AngularJsExamples/AngularJs_Binding-ng-bind.html”]
In Two-way binding the html elements and controller variables are sync in each other.
When ever you change the values from html it will reflect to the corresponding variables in controller and  vice-versa.
It can be implement by using ng-model directive.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>
    <div ng-app="">
        <p></p>
        <p>Enter Your Name:
            <input type="text" ng-model="firstName">
        </p>
        <p>Hello : <b>{{ firstName}}</b> How Are you ?</p>
    </div>
</body>

</html>
Output :
[advanced_iframe securitykey=”85899c43cd5d45b9ec5729b5189d1961d89f90d9′′ src=”https://www.onlinetutorialspoint.com/AngularJsExamples/AngularJs_Binding-ng-model.html”]
Happy Learning 🙂

Angular http (AJAX) Example Tutorials
Angular Module Example Tutorials
AngularJs Filters Example Tutorials
AngularJs lowercase Filter Example
AngularJs Currency Filter Example
AngularJs Orderby Filter Example
AngularJs Search Filter Example
Angularjs Custom Filter Example
Angularjs Services Example Tutorials
AngularJs Custom Service Example
AngularJs Custom Directive Example
AngularJs Directive Example Tutorials
Using Array in AngularJs Example
Array of objects in AngularJs  Example
Steps to Create AngularJs Controller

Angular http (AJAX) Example Tutorials
Angular Module Example Tutorials
AngularJs Filters Example Tutorials
AngularJs lowercase Filter Example
AngularJs Currency Filter Example
AngularJs Orderby Filter Example
AngularJs Search Filter Example
Angularjs Custom Filter Example
Angularjs Services Example Tutorials
AngularJs Custom Service Example
AngularJs Custom Directive Example
AngularJs Directive Example Tutorials
Using Array in AngularJs Example
Array of objects in AngularJs  Example
Steps to Create AngularJs Controller