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 Mar 04 '16 at 11:18 — d-bro82, Mar 04 '16 at 11:18

score 6 · Accepted Answer · answered Mar 04 '16 at 11:18

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 04 '16 at 11:18

Shashank Vivek

16,888
8
62
104

What is the use of $timeout parametre after the $scope parametre.?@shashank – WorksOnMyLocal Mar 04 '16 at 11:35
@Shekar.gvr: My bad. It was there by mistake. ;) not relevant in this scenario – Shashank Vivek Mar 04 '16 at 13:18
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 – WorksOnMyLocal Mar 08 '16 at 05:31
@Shekar.gvr: http://plnkr.co/edit/N3Rv34?p=preview to make u feel comfortable. Its similar to `setTimeout` of **javascript**. Try this http://stackoverflow.com/questions/19609796/what-advantage-is-there-in-using-the-timeout-in-angular-js-instead-of-window-se – Shashank Vivek Mar 08 '16 at 05:53

score 0 · Answer 2 · answered Mar 04 '16 at 11:17

0

You should use ng-model for both Textboxes-

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

answered Mar 04 '16 at 11:17

Shailendra Singh Deol

637
3
5

score 0 · Answer 3 · answered Mar 04 '16 at 11:49

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

But unfortunately that doesn't work. Why ? it would be fascinating to know — WorksOnMyLocal, Mar 08 '16 at 05:33

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

3 Answers3