current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 0 down vote favorite

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

share|improve this question
up vote 2 down vote accepted

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);
};
}
share|improve this answer
    
Could I also make a suggestion, and that is to always use parseInt(someNumber, 10), i.e. include the base value. Otherwise you could get some weird things happening. Also, if it is price's we're working with, might I suggest parseFloat instead – Callum Linington Nov 12 '14 at 11:09
1  
Thanks hey I don't need to have 2 parseInt just one only total += parseInt($scope.items[count].Price); – user3811714 Nov 12 '14 at 11:11
up vote 1 down vote

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.

share|improve this answer
2  
Don't forget the quantity! – Callum Linington Nov 12 '14 at 11:10
    
@No1_Melman, thanks! – Nathan White Nov 12 '14 at 11:11

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.