calculation in angularjs output fails with ng-model

Question

I'm working on an angular project where i perform calculations on the page. In the textfield where i put the final results, when i get it an ng-model that answer fails to load. When i take out the ng-model, the answer appears. But i want it working while it have an ng-model="total" because i will send the total value to the database. With the below script, it works

<input name="price" type="text"  id="price" ng-model="price">
<input name="quantity" type="text"  id="quantity"ng-model="price">
<input name="total" type="text"  id="total" value="{{.price*quantity}}">

But with this

 <input name="price" type="text"  id="price" ng-model="price">
    <input name="quantity" type="text"  id="quantity"ng-model="price">
    <input name="total" type="text"  id="total" value="{{.price*quantity}}" ng-model="total">

it fails to works. The answer doesn't appear in the textbox

jusopi · Accepted Answer · 2016-08-19 16:14:42Z

2

Try this instead:

<input name="price" 
       type="text"
       ng-model="price" string-to-number>

<input name="quantity" 
       type="text"
       ng-model="quantity" string-to-number>

<span>{{ price * quantity }}</span>

I'm not sure why you're trying to put the calculated value into the 3rd input, but if you are, you'll want to use ng-model-options to tell the total ngModel that it's to treat that value as a getter/setter - https://docs.angularjs.org/api/ng/directive/ngModelOptions

Also note the string-to-number directive. You're dealing with strings in the input. So in order for interpolation to work, you may need to add those.

edit

here is a working example of how I think you were trying to allow an override on the calculated value. You can enter another value in the total input and hit enter to see it working. This uses the ng-model-options - http://codepen.io/jusopi/pen/XKQzzv

edited Aug 19, 2016 at 16:14

answered Aug 19, 2016 at 15:51

jusopi

6,8133 gold badges37 silver badges44 bronze badges

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

1 Comment

user6579134 Over a year ago

thanks for the answer. it worked. Can you please look into this for me?stackoverflow.com/questions/38858112/…

Collectives™ on Stack Overflow

calculation in angularjs output fails with ng-model

1 Answer 1

edit

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

edit

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related