AngularJSで合計金額を計算してください

私はすべてのdetalle.price要素の合計の最終数を得るためにこのコードを作ろうとしています。彼らはすべて数字なので、私はそれらを合計し、sum()に最終番号を掲示する必要があります。AngularJSで合計金額を計算してください

<div id="pedidos_table"> 
    <div id="pedidos_table_item" ng-repeat="detalle in detalles"> 
    <p id="pedidos_table_item_name">{{detalle.name}}</p> 
    <p id="pedidos_table_item_price">{{detalle.price}}$</p> 
    </div> 
</div> 
<div id="pedidos_table_total"> 
    <p id="pedidos_table_item_name">TOTAL</p> 
    <p id="pedidos_table_item_price">{{sum()}}$</p> 
</div>

私はこれをやって試してみた：

$scope.sum = function(){ 
var total = 0; 
total += detalle.price; 
return total 
}

私が欠けている何かがあると知っているが、私は何を知りません。

出典

2017-02-14 Isidoro Barrera

があなたのJSONファイルを投稿し、あります。 –

[AngularJS ng-repeatの反復要素の合計を計算する]の可能な複製（http://stackoverflow.com/questions/22731145/calculating-sum-of-repeated-elements-in-angularjs-ng-repeat） – Phil

は複数回それをトリガーする可能性があるダイジェスト・サイクルなどのベストプラクティスではありません。あなたはこれを達成するためにこのように従うかもしれません。プロダクション環境では$scopeの角度で再生することも推奨されていません。コントローラインスタンスのthisを使用してください。あなたの$scope.sun()機能details.priceで

// Code goes here 
 
(function(angular) { 
 
    angular.module('myApp', []); 
 

 
    angular.module('myApp').controller('MyController', MyController); 
 

 
    MyController.$inject = ['$scope']; 
 

 
    function MyController($scope) { 
 
    var vm = this; 
 

 
    this.product_details = [{ 
 
     name: 'XXX', 
 
     price: 25 
 
    }, { 
 
     name: 'YYY', 
 
     price: 30 
 
    }, { 
 
     name: 'ZZZ', 
 
     price: 67 
 
    }]; 
 

 
    vm.total = 0; 
 
    vm.sum = sum; 
 

 
    function sum() { 
 
     angular.forEach(vm.product_details, function(key, value) { 
 
     vm.total += key.price 
 
     }); 
 
    } 
 
    } 
 
})(angular);

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-controller="MyController as ctrl"> 
 

 
    <div ng-repeat="product in ctrl.product_details"> 
 
    <p>{{ product.name }}</p> 
 
    <p>{{ product.price }}</p> 
 
    </div> 
 

 
    <button type="button" ng-click="ctrl.sum()">Calculate total</button> 
 
    <input type="text" ng-model="ctrl.total"> 
 

 
</body> 
 

 
</html>

出典

2017-02-14 04:33:57

本当に感謝しますあなたの助け！もう一つ質問があります。要素がないために合計が0を返す場合、NaNプリントを避けて番号0に置き換えるにはどうすればよいですか？ –

これを試すと、

–

angular.forEachに配列をループして合計を計算することができます。 <p></p>タグからあなたの合計メソッドを呼び出す

$scope.sum = function() { 
    var total = 0; 
    angular.forEach($scope.detalles, function(key, value) { 
     total += key.price; 
    }); 
    return total; 
    }

DEMO

var app = angular.module('app', []); 
 
app.controller('appCtrl', function($scope) { 
 
$scope.detalles = [{ 
 
    name: 'Bush', 
 
    price: 2, 
 
    Total:0 
 
    }, { 
 
    name: 'Obama', 
 
    price: 5, 
 
    Total:0 
 
    }, { 
 
    name: 'Trump', 
 
    price: 3, 
 
    Total:0 
 
    }]; 
 
    
 
    $scope.sum = function() { 
 
    var total = 0; 
 
    angular.forEach($scope.detalles, function(key, value) { 
 
     total += key.price; 
 
    }); 
 
    return total; 
 
    } 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://code.angularjs.org/1.4.7/angular.js"></script> 
 
</head> 
 
<div ng-app="app"> 
 
    <div ng-controller="appCtrl"> 
 
    <div id="pedidos_table"> 
 
    <div id="pedidos_table_item" ng-repeat="detalle in detalles"> 
 
    <p id="pedidos_table_item_name">{{detalle.name}}</p> 
 
    <p id="pedidos_table_item_price">{{detalle.price}}$</p> 
 
    </div> 
 
</div> 
 
<div id="pedidos_table_total"> 
 
    <p id="pedidos_table_item_name">TOTAL</p> 
 
    <p id="pedidos_table_item_price">{{sum()}}$</p> 
 
</div> 
 
    </div> 
 
</div> 
 
</html>

出典

2017-02-14 03:52:22 Sajeetharan

undefinedになります。

これは合計金額、すなわち合計を返します

$scope.sum = function(){ 
var total = 0; 
angular.forEach($scope.detalles, function(key, value) { 
    total = total key.price; 
}) 
return total; 
}

にあなたのSUM関数を変更します。

出典

2017-02-14 04:38:51

apiを呼び出すとボタンをクリックせずに行うことができます。

var app = angular.module('app', []); 
app.controller('appCtrl', function($scope) { 
     $scope.sum = 0; 
     $http.post(url') 
       .success(function (response) { 
        $scope.detalles = response; 
        sum($scope.detalles); //call sum function 
       }).error(function (response, status, headers, config) { 
        //error 
       }); 


function sum(priceArray) { 

    angular.forEach(priceArray, function(key, value) { 
     $scope.sum += key.price; 
    }); 
    }

}）;

<div id="pedidos_table"> 
     <div id="pedidos_table_item" ng-repeat="detalle in detalles"> 
     <p id="pedidos_table_item_name">{{detalle.name}}</p> 
     <p id="pedidos_table_item_price">{{detalle.price}}$</p> 
     </div> 
    </div> 
    <div id="pedidos_table_total"> 
     <p id="pedidos_table_item_name">TOTAL</p> 
     <p id="pedidos_table_item_price">{{sum}}</p> 
    </div>

出典

2017-02-14 04:47:55 IftekharDani

一つのアプローチはこれです、

<div id="pedidos_table"> 
    <div id="pedidos_table_item" ng-repeat="detalle in detalles"> 
    <p id="pedidos_table_item_name">{{detalle.name}}</p> 
    <p id="pedidos_table_item_price">{{detalle.price}}$</p> 
    </div> 
</div> 

<div id="pedidos_table_total"> 
    <p id="pedidos_table_item_name">TOTAL</p> 
    <p id="pedidos_table_item_price">{{sum(detalles);}}$</p> 
</div> 

// this approach can be use dynamically but the other is for a specific requirement 
// in this function will get data from the view directly the parsing objects from the data and by adding all the prices, will give total value 
    $scope.sum = function(data){ 
    var total = 0 ; 
    angular.forEach(data,function(value,key){ 
    total += value.price; 
    }); 
    return total 
    }

第2のアプローチは、

<div id="pedidos_table"> 
     <div id="pedidos_table_item" ng-repeat="detalle in detalles"> 
     <p id="pedidos_table_item_name">{{detalle.name}}</p> 
     <p id="pedidos_table_item_price">{{detalle.price}}$</p> 
     </div> 
    </div> 

    <div id="pedidos_table_total"> 
     <p id="pedidos_table_item_name">TOTAL</p> 
     <p id="pedidos_table_item_price">{{sum();}}$</p> 
    </div> 

    $scope.sum = function(){ 
    var total = 0 ; 
    angular.forEach($scope.detalles,function(value,key){ // this will get array of elements of parse the objects of it 
     total += value.price; 
    }); 
    return total 
    }

出典

2017-02-14 07:40:45

AngularJSで合計金額を計算してください

答えて

関連する問題