Monday, 28 December 2015

Two way Data binding in AngularJS

What is Two way Data binding in AngularJS?
One of the Core Feature of AngularJS which makes it popular is two way data binding. In two way data binding, any changes to the model are immediately reflected in the View and any changes in the View updates the model.


Example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Script/angular.js"></script>
    <script type="text/javascript">
    var myApp = angular.module('myApp', [])
        .controller('myController', function ($scope) {
            $scope.name = "Anoop";
        });
    </script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        Enter Name:<input type="text" ng-model="name" />
        <p>Hello! {{name}}
    </div>
</body>
</html>

In Above code, We have created a controller(i.e. myController) and registered it with myApp module. We used ng-model property for displaying the value of HTML control with the help of {{name}} Template. If we change the value in Textbox then it will update the model or If we change the value of model then it will immediately updates the View.
Preview:
I hope you like it.Thanks.
[Download Source Code via Google Drive]

1 comment:

  1. http://goo.gl/3jEmfd I found this amazing blog. It is related to this article. You must read. Although thank you for sharing your thoughts, this has added to my knowledge.

    ReplyDelete

Subscribe Now

Popular Posts

Contact us

Name

Email *

Message *

Subscribe us on YouTube

Like us on Facebook

Follow us on Google+