Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Arrow up icon
GO TO TOP
Data Oriented Development with Angularjs

You're reading from   Data Oriented Development with Angularjs

Arrow left icon
Product type Paperback
Published in Apr 2015
Publisher
ISBN-13 9781784398057
Length 156 pages
Edition 1st Edition
Languages
Arrow right icon
Author (1):
Arrow left icon
Manoj Waikar Manoj Waikar
Author Profile Icon Manoj Waikar
Manoj Waikar
Arrow right icon
View More author details
Toc

Two-way data binding

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 called newName.
  • We added a <button> element, and we are handling its clicked event (using the ngClick directive). Inside the click event, we just assigned the value of the newName new model to our old variable yourName.
  • As soon as you enter some text in the textarea value and click on the Change the underlying model's value button, the textarea value 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.
lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at €18.99/month. Cancel anytime
Modal Close icon
Modal Close icon