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

Question

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.

Use the same ng-model for both

d-bro82
– d-bro82

2016-03-04 11:18:02 +00:00
Commented Mar 4, 2016 at 11:18 — d-bro82
– d-bro82, Commented Mar 4, 2016 at 11:18

Shashank Vivek · Accepted Answer · 2016-03-04 11:18:44Z

6

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>

answered Mar 4, 2016 at 11:18

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

WorksOnMyLocal Over a year ago

What is the use of $timeout parametre after the $scope parametre.?@shashank

Shashank Vivek Over a year ago

@Shekar.gvr: My bad. It was there by mistake. ;) not relevant in this scenario

WorksOnMyLocal Over a year ago

I have already figured out that it is irelevent in this scenario...but as i am new to angular, i feel curious with evryting new about it. so wouldn't mind an explaination on what $timout does. :p @Shashank

Shashank Vivek Over a year ago

@Shekar.gvr: plnkr.co/edit/N3Rv34?p=preview to make u feel comfortable. Its similar to setTimeout of javascript. Try this stackoverflow.com/questions/19609796/…

Shailendra Singh Deol · Accepted Answer · 2016-03-04 11:17:37Z

0

You should use ng-model for both Textboxes-

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

answered Mar 4, 2016 at 11:17

Shailendra Singh Deol

6373 silver badges5 bronze badges

Comments

Ravi Kiran Ayinampudi · Accepted Answer · 2016-03-04 11:49:58Z

0

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" >

answered Mar 4, 2016 at 11:49

Ravi Kiran Ayinampudi

5992 gold badges9 silver badges25 bronze badges

1 Comment

WorksOnMyLocal Over a year ago

But unfortunately that doesn't work. Why ? it would be fascinating to know

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related