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

  • Two-way Data binding in AngularJs

    @munmun.sarkar
    Recommendations Offline Message

    • 0
    • 4
    • 1
    • 2
    • 2
    • 0
    • 0
    • 0
    • 1.68k
    Comment on it

    AngularJs provides a very useful and time saving feature,i.e,Two-way Data binding. Two-way Data binding in AngularJs is a way to synchronize data between model and view. If we change something in the model, it gets updated in the view component and vice-versa.

    Here is the code that explains the Two-way Data binding in AngularJs:-

    <html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
</head>
<body ng-app ng-init="value = 'App'">

    Sample page: <input type="text" ng-model="value">
    <h1>My First {{value}}!</h1>

</body>
</html>

    In the above code :-

    • ng-app:

      It will load the dependencies and the module.

    • ng-init:

      Initializes AngularJs app. variables

    • ng-model:

      It binds the value of AngularJs app. data to HTML input controls.

    In this code we have created a text box and by using 'ng-model' we are binding the data values.If we change the data in the textbox(,i.e. model),it simultaneously gets updated in the view.

    Therefore,you can use this feature or approach for designing web applications with less efforts.

    two-way data binding two-way binding in angularjs Data binding in AngularJs ng-model
    Comment on it

 2 Comment(s)

  • @gopiinchennai1
    Recommendations Offline Message

    over 7 years ago

    Hi,

    Thanks for sharing a great article on AngularJS!! 

    I think there are lots of people who struggle to learn AngularJS. 

    I have also tried my best to Cover all the Topics of AngularJS which will be helpful to people who are stepping into AngularJS. 

    I will appreciate if you can take a few minutes to provide your feedback for the same, it would be a great help!!
    Complete Topics of AngularJS

    Thanks a lot!!
     
Sign In
Forgot Password?
                           OR                           
Create an account !!
                           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: