Updating one value in angular model according to another input

Question

Say I have a model in angular, with three variables in my model, say a,b,c, and I want to have c=a*b.

I've done it by adding a function, updateC(), that updates c, and then my HTML would look like this:

<input name="a" ng-model="a" ng-change="updateC()"></input>
<input name="b" ng-model="b" ng-change="updateC()"></input>
<input name="c" ng-model="c" readonly></input>

But that's not a nice solution if I have alot of such triplets, because I need to define a function for each such triplet. Is there a way to bind the value of the element in the model to some formula? I.e. is there some attribute ng-like-bind-but-updates-model such that the following html will work:

<input name="a" ng-model="a"></input>
<input name="b" ng-model="b"></input>
<input name="c" ng-model="c" ng-like-bind-but-updates-model="a*b" readonly></input>

Have you tried value and the {{...}} binding instead of ng-model? I.e. <input name="c" value="{{ a*b }}" readonly />. — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Nov 23, 2015 at 10:10
you can just use <input name="c" ng-model="a * b" readonly></input> — Yaron Schwimmer
– Yaron Schwimmer, Commented Nov 23, 2015 at 10:11
Both won't work: jsfiddle.net/1j5grwhy @yarons the idea is to have a model that has a variable named c with the right value. — ShaharB
– ShaharB, Commented Nov 23, 2015 at 10:17

ogugger · Accepted Answer · 2015-11-23 10:26:02Z

2

This seems to work, not sure if that's what you want to achieve:

<input name="a" ng-model="a"></input>
<input name="b" ng-model="b"></input>
<input name="c" value="{{c=a*b}}" readonly></input>

answered Nov 23, 2015 at 10:26

ogugger

1226 bronze badges

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

Comments

Yaron Schwimmer · Accepted Answer · 2015-11-23 10:30:07Z

1

Here's a nice trick that solves your problem:

<input name="c" ng-model="c = a * b" readonly />

demo

answered Nov 23, 2015 at 10:30

Yaron Schwimmer

5,3675 gold badges40 silver badges60 bronze badges

Comments

Rich · Accepted Answer · 2015-11-23 10:32:59Z

0

you can simply bind the value of input C

<input name="c" value="{{c=a*b}}"></input>
<label>{{c}}</label>

like this: http://codepen.io/Visualife/pen/xwNKjj

you'll need to handle initial values though for a & b.

edited Nov 23, 2015 at 10:32

answered Nov 23, 2015 at 10:17

Rich

1,0512 gold badges18 silver badges43 bronze badges

4 Comments

ShaharB Over a year ago

You mean with ng-bind?

Rich Over a year ago

no, with value, please see the codepen I've attached mate

ShaharB Over a year ago

Sorry, commented before You've added the codepen. I want to have a variable named c in my scope, and your solution is essentially the same as using ng-bind, it won't update c inside the scope itself.

Rich Over a year ago

then you can set c inside 'value' as per the update and updated pen

Collectives™ on Stack Overflow

Updating one value in angular model according to another input

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related