• Java
    • JAXB Tutorial
      • What is JAXB
      • JAXB Marshalling Example
      • JAXB UnMarshalling Example
  • Spring Tutorial
    • Spring Core Tutorial
    • Spring MVC Tutorial
      • Quick Start
        • Flow Diagram
        • Hello World Example
        • Form Handling Example
      • Handler Mapping
        • BeanNameUrlHandlerMapping
        • ControllerClassNameHandlerMapping
        • SimpleUrlHandlerMapping
      • Validation & Exception Handling
        • Validation+Annotations
        • Validation+ResourceBundle
        • @ExceptionHandler
        • @ControllerAdvice
        • Custom Exception Handling
      • Form Tag Library
        • Textbox Example
        • TextArea Example
        • Password Example
        • Dropdown Box Example
        • Checkboxes Example
        • Radiobuttons Example
        • HiddenValue Example
      • Misc
        • Change Config file name
    • Spring Boot Tutorial
  • Hibernate Tutorial
  • REST Tutorial
    • JAX-RS REST @PathParam Example
    • JAX-RS REST @QueryParam Example
    • JAX-RS REST @DefaultValue Example
    • JAX-RS REST @Context Example
    • JAX-RS REST @MatrixParam Example
    • JAX-RS REST @FormParam Example
    • JAX-RS REST @Produces Example
    • JAX-RS REST @Consumes Example
    • JAX-RS REST @Produces both XML and JSON Example
    • JAX-RS REST @Consumes both XML and JSON Example
  • Miscellaneous
    • JSON Parser
      • Read a JSON file
      • Write JSON object to File
      • Read / Write JSON using GSON
      • Java Object to JSON using JAXB
    • CSV Parser
      • Read / Write CSV file
      • Read/Parse/Write CSV File – OpenCSV
      • Export data into a CSV File
      • CsvToBean and BeanToCsv – OpenCSV

JavaInterviewPoint

Java Development Tutorials

Two-Way Data Binding in AngularJS Example

May 2, 2016 by javainterviewpoint Leave a Comment

Data binding is nothing but automatic synchronization of data between view and the model. When we say Two-Way Data Binding, it means that the synchronization process works both ways. In AngularJS, when we create a model (In Javascript) and set them on to our $scope object followed by tying up the UI components(HTML) to these models AngularJS will establish Two-Way Binding between model and view. Whenever the View changes it will be reflecting the model and vice-versa. Lets take a simple example to have a better grip over data binding.

Two-Way Data Binding in AngularJS

Upon running the below code, you can see when ever the value is entered in the “text” fields the user details will be automatically updated.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="ISO-8859-1">
    <title>AngularJS Two-Way Data Binding Example</title>
    <script
       src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js">
    </script>
  </head>
  <body ng-app="myApp">
    <div ng-controller="TwoWayCtrl">
      <label>First Name :</label>
        <input type="text" ng-model="firstname" placeholder="Enter your First Name" /></br></br>

      <label>Second Name :</label>
        <input type="text" ng-model="lastname" placeholder="Enter your Second Name" /></br></br>

      <label>Age :</label>
        <input type="text" ng-model="age" placeholder="Enter your Age" /></br></br>
      </br>
      My First Name is : {{firstname}}</br>
      My Last Name is : {{lastname}}</br>
      My Age Name is : {{age}}</br>
 
      <script type="text/javascript">
        angular.module('myApp', [])
        .controller('TwoWayCtrl',function($scope) 
        {
        });
      </script>
     </div>
  </body>
</html>

How everything works ?

    • The first thing is the ng-app which bootstraps our application, since our app doesn’t depend on any other modules we are not adding anything as a dependency. Here our application name is “myApp”, which will be used in the module of our angular application.
    • We have created a controller “TwoWayCtrl” using ng-controller directive. Within the div of our controller we will be having all the business logic written
    • We have created 3 labels FirstName, LastName and Age and corresponding input boxes are created. Each text fields are binded to a model ng-model firstname,lastname and age respectively.
    • Followed by we have displayed the values entered in the text fields using the expression {{firstname}},{{lastname}},{{age}}
    • So whenever the user enters a value in the text box, it will be displayed immediately in the corresponding bind in the UI. Since AngularJS follows two-way binding.

Output

Enter values in the First Name, Last Name, Age text fields

AngularJS Two-Way Data Binding Example
Lets modify the same example and increase its complexity level a bit.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="ISO-8859-1">
    <title>AngularJS Two-Way Data Binding Example</title>
    <script
       src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js">
    </script>
  </head>
  <body ng-app="myApp">
    <div ng-controller="TwoWayCtrl">
      <label>First Name :</label>
        <input type="text" ng-model="firstname" placeholder="Enter your First Name" /></br></br>

      <label>Second Name :</label>
        <input type="text" ng-model="lastname" placeholder="Enter your Second Name" /></br></br>

      <label>Age :</label>
        <input type="text" ng-model="age" placeholder="Enter your Age" /></br></br>
      </br>
      My First Name is : {{firstname}}</br>
      My Last Name is : {{lastname}}</br>
      My Age Name is : {{age}}</br>
     
      <form>
         <button ng-click="updateUserDetails(firstname,lastname,age)" 
            type="button">Update User Details</button>
       </form>
        <script type="text/javascript">
         angular.module('myApp', []).controller('HelloCtrl',function($scope) 
         {
            $scope.updateUserDetails = function(firstname,lastname,age) 
            {
               $scope.firstname = firstname + "- Updated";
               $scope.lastname = lastname + "- Updated";
               $scope.age = age + "- Updated";
            };
         });
        </script>
     </div>
  </body>
</html>

Output

Enter values in the First Name, Last Name, Age text fields click on the Update User Details button.

AngularJS Two-Way Data Binding

  • In the above code whenever we enter values in the textbox it will be displayed in the expression {{firstname}},{{lastname}},{{age}}.
  • We have added a form with a simple button which passes the values of firstname, lastname and age to our script.  When we hit on the button “Update User Details” button, the firstname, lastname and age values will be passed to our controller through the UpdateUserDetails() method.
  • Once the Angular Script received the firstname, lastname and age, we are appending the “- updated” message to all of it and assign it to corresponding scope variables $scope.firstname, $scope.lastname, $scope.age
  • Since AngularJS follows two-way binding and we have used the same variable in the UI and as well as the script, the values will be changed in both the text fields and as well as the expression{{}}.

Thats it we have learnt how Two-Way  Binding works in AngularJS :). Happy Learning !!

Other interesting articles which you may like …

  • AngularJS Hello World Example
  • AngularJS – Modules and Controllers
  • ngBind, ngBindHtml and ngBindTemplate
  • AngularJS Form Validation with ngMessages
  • AngularJS Routing Example using ngRoute
  • AngularJS Spring MVC integration
  • AngularJS Spring MVC CRUD Example using $http service

Filed Under: AngularJS, J2EE, Java Tagged With: AngularJS Example, Data Binding, Two-Way Data Binding

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Java Basics

  • JVM Architecture
  • Object in Java
  • Class in Java
  • How to Set Classpath for Java in Windows
  • Components of JDK
  • Decompiling a class file
  • Use of Class.forName in java
  • Use Class.forName in SQL JDBC

Oops Concepts

  • Inheritance in Java
  • Types of Inheritance in Java
  • Single Inheritance in Java
  • Multiple Inheritance in Java
  • Multilevel Inheritance in Java
  • Hierarchical Inheritance in Java
  • Hybrid Inheritance in Java
  • Polymorphism in Java – Method Overloading and Overriding
  • Types of Polymorphism in java
  • Method Overriding in Java
  • Can we Overload static methods in Java
  • Can we Override static methods in Java
  • Java Constructor Overloading
  • Java Method Overloading Example
  • Encapsulation in Java with Example
  • Constructor in Java
  • Constructor in an Interface?
  • Parameterized Constructor in Java
  • Constructor Chaining with example
  • What is the use of a Private Constructors in Java
  • Interface in Java
  • What is Marker Interface
  • Abstract Class in Java

Java Keywords

  • Java this keyword
  • Java super keyword
  • Final Keyword in Java
  • static Keyword in Java
  • Static Import
  • Transient Keyword

Miscellaneous

  • newInstance() method
  • How does Hashmap works internally in Java
  • Java Ternary operator
  • How System.out.println() really work?
  • Autoboxing and Unboxing Examples
  • Serialization and Deserialization in Java with Example
  • Generate SerialVersionUID in Java
  • How to make a class Immutable in Java
  • Differences betwen HashMap and Hashtable
  • Difference between Enumeration and Iterator ?
  • Difference between fail-fast and fail-safe Iterator
  • Difference Between Interface and Abstract Class in Java
  • Difference between equals() and ==
  • Sort Objects in a ArrayList using Java Comparable Interface
  • Sort Objects in a ArrayList using Java Comparator

Follow

  • Coding Utils

Useful Links

  • Spring 4.1.x Documentation
  • Spring 3.2.x Documentation
  • Spring 2.5.x Documentation
  • Java 6 API
  • Java 7 API
  • Java 8 API
  • Java EE 5 Tutorial
  • Java EE 6 Tutorial
  • Java EE 7 Tutorial
  • Maven Repository
  • Hibernate ORM

About JavaInterviewPoint

javainterviewpoint.com is a tech blog dedicated to all Java/J2EE developers and Web Developers. We publish useful tutorials on Java, J2EE and all latest frameworks.

All examples and tutorials posted here are very well tested in our development environment.

Connect with us on Facebook | Privacy Policy | Sitemap

Copyright ©2023 · Java Interview Point - All Rights Are Reserved ·