AngularJS:将一个对象内的两个数字相乘，然后获得总数

Question

关于如何在AngularJS中的对象中乘数，我有一个小问题。我想要做的是将下面的代码从使用AngularJS的HTML中的两个数字乘成一个服务或工厂。这里是工作HTML (输入是来自角材料的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

也许这会对你有帮助。

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

Answer 2

这是您的服务代码(复制和粘贴)：

    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>

希望这能帮到你。