Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Understanding Data Binding in AngularJS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 199
    Comment on it

    In this post, you will learn about the data binding in angularJs. It is one of the powerful feature which angularJs provides.

    There is two-way data binding in angularJs to bind data between model and view.
    The data binding mechanism is handled with the functions: $watch(), $digest() and $apply() to update new values.

    Any changes you do in the view updates the model and any changes you do in the model updates view also. This is called two-way data binding.
    Angular uses $watch that will look into model changes on the scope. If the value on the scope changes, then view is updated automatically. It is done by $digest cycle.
    Example:
     

    <!DOCTYPE html>
    <html>
    <head>
      <script src="angular.js"></script>
    </head>
    
    <body ng-app ng-init="firstName = swati; lastName = kothiyal;>
      <strong>First name:</strong> {{firstName}}<br />
      <strong>Last name:</strong> <span ng-bind="lastName"></span><br />
      <br />
      <label>Set the first name: <input type="text" ng-model="firstName"/></label><br />
      <label>Set the last name: <input type="text" ng-model="lastName"/></label>
    </body>
    </html>

    In the above example when you will change the value of the input field it will automatically change the value inside strong element.

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: