• PHP
  • RubyonRails
  • jQuery
  • Core Java
  • JSP
  • Java IO
  • JavaScript
  • Struts
  • Spring

  • <

    AngularJS Data Binding

    Data binding in AngularJS is the synchronization between the model and the view.

    AngularJS applications usually have a data model. The data model is a collection of data available for the application.

    Two-way Binding



    Data binding in AngularJS is the synchronization between the model and the view.

    When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well. This happens immediately and automatically, which makes sure that the model and the view is updated at all times.

    Data Binding Example



    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <body>
    
    <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 = "java";
        $scope.lastname = "meant";    
    });
    </script>
    
    <p>Change the name inside the input field, and the model data will change automatically, and therefore also the header will change its value.</p>
    
    </body>
    </html>
    
    
    
















    © copyright 2017-2021 Completedone pvt ltd.