How to bind 2 models to one input field in Angular?

Angularjs

Angularjs Problem Overview


Is there anyway that I can bind two model values to one input field?

Suppose I have input field which I want to be the value of two variables in the scope something like:

<input type="text" model="sn_number; id" > 

Angularjs Solutions


Solution 1 - Angularjs

You cannot, but there are some workarounds.

1. Use ngChange to update the other model
<input type="text" 
       ng-model="sn_number" 
       ng-change="id=sn_number"/> 
2. You could watch a model, and when in changes, update another
$scope.$watch('sn_number', function(v){
  $scope.id = v;
});

You would need to watch also for changes in id if you want to keep them in sync.

Example here

Solution 2 - Angularjs

You can bind fields immediately, not only in ng-change, and actually it isn't data binding, its only angular expression

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

  <label>Key</label>
  <input type="text" ng-model="key" value="{{key=name}}" />

Solution 3 - Angularjs

It would make no sense to bind an input to two variables in the model. Binding works both ways, so if the model is updated, the field is updated and vice-versa. If you were to bind to two variables, what would be the single source of truth?

However you can use ng-change to call a method on the controller which can set two variables when the field changes.

Solution 4 - Angularjs

with ng-init

<div ng-controller="ctrl" ng-init="model = { year: '2013', month:'09'}">

or

<div ng-repeat="c in contact" ng-init="likes = { food: 'steak', drink:'coke'}">

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAdelinView Question on Stackoverflow
Solution 1 - AngularjsjaimeView Answer on Stackoverflow
Solution 2 - AngularjsRuben.sarView Answer on Stackoverflow
Solution 3 - AngularjssuperluminaryView Answer on Stackoverflow
Solution 4 - AngularjsbresleveloperView Answer on Stackoverflow