×

Html & Html5

The World's best Software Development Study Portal

AngularJS Data Binding


  • Data binding is the synchronization between the model and the view.

  • The HTML container where the AngularJS application is displayed, is called the view.

  • The data model is a collection of data available for the application.
  • For example





         	<div ng-app="myApp" ng-controller="myCtrl">
            Name: <input ng-model="firstname">
             <h1>{{firstname}}</h1>
             </div>
             <script>
             var app = angular.module('myApp', []);
             app.controller('myCtrl', function($scope) {
             $scope.firstname = "IT training classes";
             $scope.lastname = "welcomes you";
             });
             </script>
             
    Output
    Name: IT training classes




    Two-way data Binding
    When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well.
    For example





           <div ng-app="myApp" ng-controller="myCtrl">
           Name: <input ng-model="firstname">
           <h1>{{firstname}}</h1>
           </div>
    
           <script>
           var app = angular.module('myApp', []);
           app.controller('myCtrl', function($scope) {
           $scope.firstname = "IT training classes";
           $scope.lastname = "welcomes you";    
           });
           </script>
    
             
    Output

    Name:

    {{firstname}}