Ermitteln Sie den Gesamtpreis in AngularJS

Ich versuche diesen Code zu machen, um die endgültige Anzahl der Summe aller detalle.price Elemente zu erhalten. Sie sind alle Zahlen, also muss ich sie addieren und die letzte Zahl auf sum() setzen.Ermitteln Sie den Gesamtpreis in 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>

Ich habe versucht das zu tun:

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

Ich weiß etwas fehlt da ist, aber ich weiß nicht, was.

Quelle

2017-02-14 Isidoro Barrera

Ihre JSON-Datei schreiben. –

Mögliches Duplikat von [Berechnung der Summe der wiederholten Elemente in AngularJS ng-repeat] (http://stackoverflow.com/questions/22731145/calculating-sum-of-repeated-elements-in-angularjs-ng-repeat) – Phil

Ihre Summe Methode von einem <p></p> Tag Aufrufen ist keine bewährte Methode als Digest-Zyklus könnte es mehrmals auslösen. Sie könnten diesem Weg folgen, um dasselbe zu erreichen. Auch das Abspielen mit dem Winkel $scope wird für die Produktionsumgebung nicht empfohlen. Verwenden Sie daher this der Controller-Instanz.

// 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>

Quelle

2017-02-14 04:33:57

Wirklich zu schätzen Eure Hilfe! Ich habe noch eine Frage. Wenn die Summe 0 zurückgibt, weil keine Elemente vorhanden sind, wie vermeide ich den NaN-Ausdruck und ersetze ihn durch die Zahl 0? –

Sie können dies versuchen,

–

Sie können angular.forEach durch das Array durchlaufen und die Summe berechnen.

$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>

Quelle

2017-02-14 03:52:22 Sajeetharan

In Ihrer Funktion $scope.sun()details.price wird undefined sein.

Ändern Sie bitte Ihre Summenfunktion zu

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

Dieser Gesamtpreis heißt Summe zurück.

Quelle

2017-02-14 04:38:51

Sie können darauf verzichten, auf die Schaltfläche zu klicken, wenn Sie api aufrufen.

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>

Quelle

2017-02-14 04:47:55 IftekharDani

ein Ansatz ist das,

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

zweiter Ansatz ist,

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

Quelle

2017-02-14 07:40:45

Ermitteln Sie den Gesamtpreis in AngularJS

Antwort

Verwandte Themen