javascript Angular - 使用函数对数字求和并将其放入视图中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19491246/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular - sum up numbers using a function and put it in the view
提问by The Whiz of Oz
I am trying to create a function that will sum up some numbers from an incoming factory (and some from the client-side in real time), and will put the sum in the view. Totally stuck.
我正在尝试创建一个函数，该函数将对来自传入工厂的一些数字（以及一些来自客户端的实时数字）求和，并将总和放在视图中。完全卡住了。
1 - First of all, I do not understand how to display in the view a variable that was assembled within a controller function.
1 - 首先，我不明白如何在视图中显示在控制器函数中组装的变量。
So let's say I have something like:
所以让我们说我有这样的事情：
$scope.total = function() {
var totalNumber = 0;
}
How do I get the totalNumber to show in the view?
如何让 totalNumber 显示在视图中？
I assume after I get this, in order to sum up my factory data:
我假设在我得到这个之后，为了总结我的工厂数据：
var revenues = [
{ amount: 1254 },
{ amount: 1654 },
{ amount: 33 },
{ amount: 543 }
];
I will have to do something like:
我将不得不做这样的事情：
$scope.total = function() {
var totalNumber = 0;
for(i=0; i<revenues.length; i++){
totalNumber = totalNumber + revenues[i].amount
}
}
Is this correct? Will it update in real time if I dynamically change the revenue array?
这个对吗？如果我动态更改收入数组，它会实时更新吗？
回答by Brian Genisio
As promised, here is a different approach. One that watches the revenuescollection and updates a value every time it changes:
正如所承诺的，这是一种不同的方法。一种监视revenues集合并在每次更改时更新值的方法：
<div ng-app ng-controller="SumCtrl">
Total: {{total}}
<input type="text" ng-model="newAmount" />
<button ng-click="add(newAmount)">Add</button>
</div>
And the JavaScript:
和 JavaScript：
function SumCtrl($scope) {
function total() {
var totalNumber = 0;
for(var i=0; i<$scope.revenues.length; i++){
totalNumber = totalNumber + $scope.revenues[i].amount
}
return totalNumber;
}
$scope.revenues = [
{ amount: 1254 },
{ amount: 1654 },
{ amount: 33 },
{ amount: 543 }
];
$scope.add = function(value) {
$scope.revenues.push({ amount: parseInt(value) });
}
$scope.$watchCollection("revenues", function() {
$scope.total = total();
});
}
回答by Brian Genisio
There are several approaches to solving this. If you want a total()function, it goes like this:
有几种方法可以解决这个问题。如果你想要一个total()函数，它是这样的：
<div ng-app ng-controller="SumCtrl">
Total: {{total()}}
<input type="text" ng-model="newAmount" />
<button ng-click="add(newAmount)">Add</button>
</div>
And here is the code:
这是代码：
function SumCtrl($scope) {
$scope.revenues = [
{ amount: 1254 },
{ amount: 1654 },
{ amount: 33 },
{ amount: 543 }
];
$scope.total = function() {
var totalNumber = 0;
for(var i=0; i<$scope.revenues.length; i++){
totalNumber = totalNumber + $scope.revenues[i].amount
}
return totalNumber;
}
$scope.add = function(value) {
$scope.revenues.push({ amount: parseInt(value) });
}
}
The total()function will re-evaluate whenever the scope changes (a lot). A better approach is to watch for changes to revenuesand update a static value... I'll post that answer as well.
total()每当范围发生变化（很多）时，该函数将重新评估。更好的方法是观察revenues静态值的变化并更新......我也会发布该答案。
回答by thebenedict
Here's a plunker
这是一个plunker
There's more than one way to do this, and your controller might look different depending on how the data looks from your factory.
有不止一种方法可以做到这一点，您的控制器可能看起来会有所不同，具体取决于工厂数据的外观。
Edit: A couple of good answers were posted here while I was writing. This is similar to Brian's first approach.
编辑：我在写作时在这里发布了一些很好的答案。这类似于布赖恩的第一种方法。
