AngularJS: 一个对象内的两个数相乘，然后求和

Question

关于如何在 AngularJS 中的对象内乘以数字，我有一个小问题。我想做的是将以下代码从使用 AngularJS 将 HTML 中的两个数字相乘更改为服务或工厂。这是正在工作的 HTML（输入是来自 Angular Material 的 md-text-float），AngularJS 中的控制器和工厂：

HTML:

 <md-text-float ng-repeat="macro in macros"
                    md-theme="deep-orange"
                    label="{{macro.type}}"
                    type="number"
                    ng-model="macro.amount">
  </md-text-float>

<div class="tCalories md-whiteframe-z1" ng-repeat="macro in macros">
       <span class="subtitles">{{macro.type}}</span>
        <div class="macros">{{ macro.amount * macro.multiplier }}</div>
        <md-tooltip>{{macro.tip}}</md-tooltip>
</div>
<div class="tCalories md-whiteframe-z1">
        <span class="subtitles">Total Calories</span>
        <div class="macros total">{{totals() | number: 2}}</div>
</div>

控制器：

app.controller('dataAdd', ['$scope', 'MacroCalculation', function($scope, MacroCalculation) {

$scope.macros = MacroCalculation.macros();
$scope.totals = MacroCalculation.totals();

}]);

工厂：

app.factory('MacroCalculation', function() {

var macros = [
   {'type': 'Protein', 'amount': null,'multiplier': 4,'tip': 'Calories per gram of protein'},
   {'type': 'Carbohydrate', 'amount': null, 'multiplier': 4, 'tip': 'Calories per gram of carbohydrate'},
   {'type': 'Fat', 'amount': null, 'multiplier': 9, 'tip': 'Calories per gram of fat'}
 ];


var getMacros = function() {
    return macros;
};


var totals = function() {
    for (var i = 0, values = 0, length = macros.length; i < length; i++) {
        values += macros[i].amount * macros[i].multiplier;
    }
       return values;
};


var getTotals = function() {
  return totals;
};

return {
    macros: getMacros,
    totals: getTotals

}

});

我使用 {{totals()}} 得到了总数；但是，我也想将 {{macro.amount * macro.multiplier}} 移动到工厂内的函数中。我不确定如何在工厂中循环 macros 以进行相同的计算。

Answer 1

这是您的服务代码（复制和粘贴）：

    app.factory('MacroCalculation', function() {

     ....

    function calculate(index) {
        //do your math here
    } 
    return {
        macros: getMacros,
        totals: getTotals,
        calculate: calculate 
    }
});

注意：也将此功能添加到您的控制器。

<div class="tCalories md-whiteframe-z1" ng-repeat="macro in macros"> 
    <span class="subtitles">{{macro.type}}</span> 
    <div class="macros">{{ calculate($index) }}</div> 
    <md-tooltip>{{macro.tip}}</md-tooltip> 
</div>

希望对您有所帮助。

Answer 2

也许这对你有帮助。

var macros = [
    {
        'type': 'Protein',
        'amount': null,
        'multiplier': 4,
        'tip': 'Calories per gram of protein',
        'total': function() { return this.amount * this.multiplier; }
    }
];

你可以为每个人做同样的事情。如果你想要一个单一的功能，来处理这个。

var singleTotal = function(macro) {
    return macro.amount * macro.multiplier;
}

我认为这应该可以解决您的问题。

和AngularJS有他自己的forEach功能。尝试实现：

var totals = function() {
    var values = 0; // declarate all vars, it's a good pratice
    angular.forEach(macros, function(macro, index) {
        values += macro.amount * macro.multiplier;
    });
    return values;
};

AngularJS: 一个对象内的两个数相乘，然后求和

AngularJS: Multiplying Two Numbers within an Object and then Obtaining the Total

javascript

angularjs