Question

我的表有一个名为“定价”的列，我想要的是计算商品的总价。我试过的并没有添加所有的总价格，它只显示了相同的价值。 table row。我已经包含了一个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

Answer 1

您的问题是您将价格和数量定义为字符串而不是数字。你有两个选择

将价格和数量定义为数字而不是字符串，这是更好的解决方案

在计算过程中使用parseInt或parseFloat

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);
};
}

Answer 2

与Ghyath Serhal所说的类似，请使用此代码而不是您拥有的代码

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

我不认为在这个实例中需要整数值作为字符串，因此将它们用作整数将解决您的问题。

如何使用AngularJS计算数组元素中项目的总和

2 个答案: