CODEWITHSUNDEEP
htmlangularjs
user3811714
user3811714

Reputation: 276

How to calculate the total sum of items in array element using AngularJS

I have a table that has a column named priced,what I want is to calculate the total price of the items.What I tried doesn't add all the total price it just displays the same values that are in the table row.I have included a link to jsbin.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<html>
<div ng-app>
        <div ng-controller="ShoppingCartCtrl">
            <br />
            <table border="1">
                <thead>
                    <tr>
                        <td>Name</td>
                        <td>Price</td>
                        <td>Quantity</td>
                        <td>Remove Item</td>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in items">
                        <td>{{item.Name}}</td>
                        <td>{{item.Price}}</td>
                        <td>{{item.Quantity}}</td>
                        <td><input type="button" value="Remove" ng-click="removeItem($index)" /></td>
                    </tr>
                </tbody>
            </table>
            <br />
            <div>Total Price: {{totalPrice()}}</div>
            <br />
            <table>
                <tr>
                    <td>Name: </td>
                    <td><input type="text" ng-model="item.Name" /></td>
                </tr>
                <tr>
                    <td>Price: </td>
                    <td><input type="text" ng-model="item.Price" /></td>
                </tr>
                <tr>
                    <td>Quantity: </td>
                    <td><input type="text" ng-model="item.Quantity" /></td>
                </tr>
                <tr>
                    <td colspan="2"><input type="Button" value="Add" ng-click="addItem(item)" /> </td>

                </tr>
            </table>
        </div>
    </div>
</html>

function ShoppingCartCtrl($scope)  {
        $scope.items = [
            {Name: "Soap", Price: "25", Quantity: "10"},
            {Name: "Shaving cream", Price: "50", Quantity: "15"},
            {Name: "Shampoo", Price: "100", Quantity: "5"}
        ];

        $scope.addItem = function(item) {
            $scope.items.push(item);
            $scope.item = {};
        };

        $scope.totalPrice = function(){
            var total = 0;
            for(count=0;count<$scope.items.length;count++){
                total +=$scope.items[count].Price + $scope.items[count].Price;
            }
            return total;
        };

        $scope.removeItem = function(index){
            $scope.items.splice(index,1);
        };
    }

http://jsbin.com/mapigagawa/1/edit?html,js,output

Upvotes: 4

Views: 13755

Answers (2)

Ghyath Serhal
Ghyath Serhal

Reputation: 7632

Your problem is that you defined the price and quantity as string and not as numbers. You have two choices

  1. Define the Price and quantity as numbers and not strings, which is the better solution

  2. use parseInt or parseFloat during the calculation

    function ShoppingCartCtrl($scope)  {
$scope.items = [
    {Name: "Soap", Price: 25, Quantity: 10},
    {Name: "Shaving cream", Price: 50, Quantity: 15},
    {Name: "Shampoo", Price: 100, Quantity: 5}
];

$scope.addItem = function(item) {
    $scope.items.push(item);
    $scope.item = {};
};

$scope.totalPrice = function(){
    var total = 0;
    for(count=0;count<$scope.items.length;count++){
        total += $scope.items[count].Price + $scope.items[count].Price;
    }
    return total;
};

$scope.removeItem = function(index){
    $scope.items.splice(index,1);
};
}

Upvotes: 4

Nathan White
Nathan White

Reputation: 1080

Similar to what Ghyath Serhal has said, use this code instead of what you have

$scope.items = [
    {Name: "Soap", Price: 25, Quantity: 10},
    {Name: "Shaving cream", Price: 50, Quantity: 15},
    {Name: "Shampoo", Price: 100, Quantity: 5}
];

I don't see any need for integer values in this instance to be strings, so using them as integers will solve your problem.

Upvotes: 1

Related Questions