Question

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

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：在对象中乘以两个数字然后获取总数

2 个答案: