CODEWITHSUNDEEP
angularjsangularjs-scope
WorksOnMyLocal
WorksOnMyLocal

Reputation: 1689

How can a Two way Binding be implemented on two textboxes using AngularJs?

I am new to AngularJs, and hence i am curious about all the features it has to offer.

When i read about two way binding, I felt like experimenting it on 2 Textboxes. Where I would enter text into 1st Textbox and at the same type i can see the same text being reflected in the 2nd textbox. I searched the web for such examples of 2 way binding, but could only find examples of textbox and span.

So could anyone help me? this is what i tried

 <html ng-app="myapp">
    <div ng-bind="">
    <input type="text"  ng-model="name" >
    <input type="text" ng-bind="name" >
    </div>
    </html>

and also 

 <input type="text"  ng-model="name" >
    <input type="text" ng-value="name" >

and 

<input type="text"  ng-model="name" >
<input type="text" ng-value={{name}} >

But nothing seems to work.

Upvotes: 2

Views: 2997

Answers (3)

Ravi Kiran Ayinampudi
Ravi Kiran Ayinampudi

Reputation: 599

Adding to what @d-bro82 and @Shailendra Singh Deol posted

AngularJs supports MVVM framework which synchronizes the data automatically between model and view.

The ng-model directive binds the value of HTML controls like input, select, textarea.

In the first text box when you type some text, it binds to the model. 

<input type="text"  ng-model="name" >

When you create a second textbox with same model, it reflects the value which is already binded.

<input type="text"  ng-model="name" >

Upvotes: 0

Shashank Vivek
Shashank Vivek

Reputation: 17504

Two way binding means you can bind some value from html page to Angular controller. Hope this Plunker would help you understand it

<div ng-controller="mainCtrl">
  Val1: <input type="text"  ng-model="name" name="val1">
  <p>
  Val2: <input type="text"  ng-model="name" name="val2">
</div>

Upvotes: 6

Shailendra Singh Deol
Shailendra Singh Deol

Reputation: 637

You should use ng-model for both Textboxes-

<input type="text"  ng-model="name" >
<input type="text" ng-model="name" >

Upvotes: 0

Related Questions