AngularJS update value from multiple textbox values

Question

I have three product details and I have the total price at the bottom. If user changes the quantity of one item, then the total price should be updated.

I have

<div>
<p class="desc">{{item.desc}}</p>
<p class="price">{{item.price}}</p>
<p class="qty"><input type="text" maxlength="2" ng-model="item.qty"></p>
</div>

<div>
<p class="desc">{{item.desc}}</p>
<p class="price">{{item.price}}</p>
<p class="qty"><input type="text" maxlength="2" ng-model="item.qty"></p>
</div>

<div>
<p class="desc">{{item.desc}}</p>
<p class="price">{{item.price}}</p>
<p class="qty"><input type="text" maxlength="2" ng-model="item.qty"></p>
</div>

Total Price: $XXXX.XX

I get the above divs using loop.

When user changes the quantity in any of the three, then I need to update the total price and display below.

Suppose:

DIV1 has price $10 qty 1
DIV2 has price $20 qty 1
DIV3 has price $30 qty 1

The total is $60

If user changes the quantity of DIV2 to 3, then I need to get the total as $100

How do I do this in AngularJS?

The example code has all three divs in the same scope, so they'll both display and affect the same item. Try showing your scopes in more realistic example, this will help us answer. — e-neko
– e-neko, Commented Sep 23, 2016 at 0:29
Have you had a look at my answer? Let me know if you have any trouble with it. — Michael Yaworski
– Michael Yaworski, Commented Sep 23, 2016 at 3:16

ngCoder · Accepted Answer · 2016-09-23 08:19:36Z

Here is working DEMO for your problem.I refactored your multiple div's to single one using ng-repeat and to keep track of quantity change I've used ng-change to re calculate the price every time the quantity changes.

In HTML

<body ng-controller="dobController">
     <div ng-repeat="item in items track by $index">
<p class="desc">{{item.desc}}</p>
<p class="price">{{item.price}}</p>
<p class="qty"><input type="text" maxlength="2" ng-change="updatePrice()" 
 ng-model="item.qty"></p>
</div>
Total Price is {{totalPrice}}
  </body>

In JS

$scope.totalPrice = 0;

        $scope.items = [{
            "item": "phone",
            "desc": "Iphone 4",
            "price": 100,
            "qty": 1
        }, {
            "item": "phone",
            "desc": "Iphone 5",
            "price": 200,
            "qty": 2
        }, {
            "item": "phone",
            "desc": "Iphone 6",
            "price": 300,
            "qty": 3
        }, {
            "item": "phone",
            "desc": "Iphone 7",
            "price": 400,
            "qty": 1
        }];
        $scope.updatePrice = function() {
            var total = 0;
            angular.forEach($scope.items, function(item) {
                total += item.qty * item.price;
            });
            $scope.totalPrice = total;
        };

        $scope.updatePrice();

Hope this helps in resolving your problem.

Michael Yaworski · Accepted Answer · 2016-09-23 01:33:46Z

Although it may be inefficient to iterate through all of your items again, you can consider the following method if it's not a concern for you.

Try making a custom filter for the items:

E.g. put this in your JavaScript:

yourApp.filter('totalPrice', function() {
    return function(items) {
        var total = 0;

        // iterate through all the items to sum the price
        angular.forEach(items, function(item) {
            total += item.qty * item.price;
        }.bind(this));

        return total;
    };
});

And then use that filter in the total price div inside the template:

<div>
    Total Price: {{ items | totalPrice }}
</div>

And you can do any formatting you want (e.g. adding dollar sign, commas, etc.) inside that filter definition.

Collectives™ on Stack Overflow

AngularJS update value from multiple textbox values

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related