Let's extend the preceding example to illustrate two-way data binding:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script> <title>AngularJS - Two way data binding</title> </head> <body> <div ng-app> <div> <h2 style="color:blue;">One way data binding? Cool!</h2> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <h3>Hello {{yourName}}!</h3> </div> <hr /> <div> <h2 style="color:green;">Two way data binding? Great!</h2> <textarea type="text" ng-model="newName" placeholder="Enter some text to change the value of the underlying model"></textarea> <button ng-click="yourName = newName"> Change the underlying model's value </button> </div> </div> </body> </html>
(two-way-data-binding.html)
We've made very few changes to our preceding Hello World example. We introduced a
<textarea>element and bound it to a new model variable callednewName.We added a
<button>element, and we are handling its clicked event (using thengClickdirective). Inside the click event, we just assigned the value of thenewNamenew model to our old variableyourName.As soon as you enter some text in the
textareavalue and click on the Change the underlying model's value button, thetextareavalue is reflected in the Name textbox and the Hello label.This shows two-way data binding in action. The UI control reflects the value of the underlying model and vice versa.