Reverse binding in AngularJs

Question

I have two input boxes. Whatever typed in first input box should show in second, it is easy. But, If I typed something in second input box and try to display in first it doesn't work.

Here is code.

<div ng-app="">
  <input type="text" ng-model="first" value={{second}}>
  <input type="text" value={{first}} ng-model="second">
</div>

Is it not allowed in Angular?

32teeths · Accepted Answer · 2017-03-18 06:37:33Z

1

If have two input boxes share the same value is what you want , then assigning the the same scope variable for the both the ng-model would also work .

<div ng-app="">
  <input type="text" ng-model="form.sameName">
  <input type="text" ng-model="form.sameName">
</div>

And it is adviced to use dot notation for the ng-model variables .

answered Mar 18, 2017 at 6:37

32teeths

1,5092 gold badges15 silver badges32 bronze badges

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

1 Comment

WeAreRight Over a year ago

What if I have four input boxes such that first two with same value binding and other two with same value binding. Then what will be in "ng-model" for those input boxes.

Sajeetharan · Accepted Answer · 2017-03-18 06:41:01Z

1

You are closer, use the same ng-model for both the inputs,

 <input type="text" ng-model="data">
 <br>
    <input type="text" ng-model="data">
<br>

DEMO

var myApp = angular.module('myApp', []);
 myApp.controller('TestCtrl', ['$scope', function($scope) {

}]);

<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="myApp">
<div ng-controller="TestCtrl">
    <input type="text" ng-model="data">
    <br>
    <input type="text" ng-model="data">
    <br>
  </div>
</body>

answered Mar 18, 2017 at 6:41

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

7 Comments

Sajeetharan Over a year ago

@WeAreRight because you have two different models

WeAreRight Over a year ago

What about solution provided below by @32theeths. It looks somewhat easy to remember.

Sajeetharan Over a year ago

It's the same solution, using the same variable across two models

WeAreRight Over a year ago

What if I have four input boxes such that first two with same value binding and other two with same value binding. Then what will be in "ng-model" for those input boxes.

Sajeetharan Over a year ago

what do you want to achieve by having that? it depends on your requirement

|

Collectives™ on Stack Overflow

Reverse binding in AngularJs

2 Answers 2

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related