Full Stack Solutions
5076.img4

Two Way Data Binding in Angular JS

Assume a problem :”You want user input to be used in another part of your HTML page”

Angular gives you the “ng-model” Directive to bind the text input to the expression.

Enter your name: <input type="text" ng-model="name"></input>
    <p>Hello {{name}}!</p>

We have a “ng-model” attribute and using the name variable in an expression that will keep both in sync automatically.So if you will write something into the text input that automatically reflect the changes in the paragraph.

Traditionally using Jquery :

<html>
    <head>
      <script src="http://code.jquery.com/jquery.min.js"></script>
    </head>
    <body>
      Enter your name: <input type="text"></input>
      <p id="name"></p>
  
      <script>
       $(document).ready(function() {
         $("input").keypress(function() {
           $("#name").text($(this).val());
         });
       });
     </script>
 
   </body>
 </html>

With this approach On document.ready we bind the keypress event in the input text that will replace the text in paragraph in callback function.So the Jquery Solution for the Data binding you particularly need to deal with document.ready callbacks, element selection of input with id : “name” and then the event binding regarding the input text.

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.

Most popular