Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Understanding Data Binding in AngularJS

    @swati.kothiyal
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 444
    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:
     

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.   <script src="angular.js"></script>
    5. </head>
    6.  
    7. <body ng-app ng-init="firstName = swati; lastName = kothiyal;>
    8.   <strong>First name:</strong> {{firstName}}<br />
    9.   <strong>Last name:</strong> <span ng-bind="lastName"></span><br />
    10.   <br />
    11.   <label>Set the first name: <input type="text" ng-model="firstName"/></label><br />
    12.   <label>Set the last name: <input type="text" ng-model="lastName"/></label>
    13. </body>
    14. </html>

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

     

    AngularJS HTML tags
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: