Рассчитать стоимость в 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

Вызов ваш метод суммы из <p></p> тега не лучшая практика, как цикл дайджеста может вызвать его несколько раз. Вы можете следовать этому пути, чтобы достичь того же. Кроме того, игра с угловым $scope не предлагается для производственной среды, поэтому используйте экземпляр контроллера .

// 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, чтобы пройти через массив и вычислить общее количество.

$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

В вашей $scope.sun() функции details.price будет undefined.

Измените функцию суммы на

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

Вернёт Общая стоимость т.е. сумму.

источник

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 
    }

второй подход,

<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

ответ

Смежные вопросы