setting input value while editing in angular

Question

I'm trying to display the current value of an input which is bind to a data model.

Here is my input field

input(ng-if="edit == $index", type='number', ng-model='item.price')

This one shows the price of a single item, when I'm trying to edit the price field. Normally in the span tag to show the total price, I'm multiplying price with quantity.

span(ng-if="edit != $index") item.quantity * item.price

How can I display this calculation result instead of a single item price as value of input?

Thank you

I'm confused... you want the user to modify the calculated total instead of the unit price? — Claies
– Claies, Commented Dec 20, 2015 at 15:03
Normally, I'm showing the total price, however when I press my edit button, value is shown as unit price. I want to display the total price while editing not the unit price. User sees total price before edit, but when user presses the edit button, he sees unit price — Ahmet Tanakol
– Ahmet Tanakol, Commented Dec 20, 2015 at 15:19
right, this doesn't make sense. it is not normal for a calculated field to be the input value, since there isn't any way to determine which of the values used in the calculation should be adjusted to hit this new target (i.e., if your user changes the total price, does that imply that the unit price be adjusted or the quantity be adjusted to reach this new total value?)... If you are trying to develop some sort of dynamic UI that allows this, you need to add a lot more detail explaining your formulas. — Claies
– Claies, Commented Dec 20, 2015 at 15:37
you could provide a variable to hold the calculated value, and bind an input to this variable, but the moment that the user modifies this value, the relationship between this value and the original values used to calculate it are lost, and the total becomes an arbitrary value. — Claies
– Claies, Commented Dec 20, 2015 at 15:40
I understand what you are saying. I suddenly got the point. Actually, user sees the unit price and when he changes it and save it, I'm displaying the new total price so which is ok. I was a little bit confused, but I want my user to change unit price which will trigger the new total calculation. Thank you :) — Ahmet Tanakol
– Ahmet Tanakol, Commented Dec 20, 2015 at 15:55

Jodevan · Accepted Answer · 2015-12-20 15:15:56Z

0

I'm not sure if I got it right. I wrote a plunker trying to reproduce your issue. Is this your problem?

<body ng-controller="MyCtrl">
  <input type="number" ng-model="item.price">
  <input type="number" ng-model="item.qty">
  <div>Total: {{item.price * item.qty}}</div>
</body>

angular.module('myApp', []).controller('MyCtrl', function($scope) {
    $scope.item = {
    price: 10,
    qty: 5
  }
});

http://plnkr.co/edit/CnLieDhltMJD2jFp5Tzm

answered Dec 20, 2015 at 15:15

Jodevan

7501 gold badge6 silver badges20 bronze badges

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

1 Comment

Ahmet Tanakol Over a year ago

What I want is input field value has to be the total price before editting

AlainIb · Accepted Answer · 2015-12-20 15:18:13Z

0

her is a plunkr : http://plnkr.co/edit/VIl9OymuqhMartw90hox?p=preview

html :

<input ng-model="item.price" />
<span> {{item.price * item.quantity}} </span>

Controller :

function Ctrl($scope) {
  $scope.item = {'price' : 0 ,'quantity':5};
}

answered Dec 20, 2015 at 15:18

AlainIb

4,6156 gold badges42 silver badges67 bronze badges

2 Comments

Ahmet Tanakol Over a year ago

It doesn't give me the total price as the value of input field. If I set price 10, the input field's value will be also 10, not 50. I want my user to see 50 when editting the input

AlainIb Over a year ago

first if you put 10 in the input the total will be 50. second the behavior you want is strange. you should not let the user to edit the total

Collectives™ on Stack Overflow

setting input value while editing in angular

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related