角度 - 使用函数对数字求和并将其放入视图中

Angular - sum up numbers using a function and put it in the view

本文关键字：视图 求和 函数 数字 角度      更新时间：2023-09-26

我正在尝试创建一个函数，该函数将汇总来自传入工厂的一些数字（以及来自客户端的一些实时数字），并将总和放在视图中。完全卡住了。

1 - 首先，我不明白如何在视图中显示控制器函数中组装的变量。

所以假设我有这样的东西：

$scope.total = function() {
    var totalNumber = 0;
}

如何让总数显示在视图中？

我假设在我得到这个之后，为了总结我的工厂数据： 

var revenues = [
            { amount: 1254 },
            { amount: 1654 },
            { amount: 33 },
            { amount: 543 }
    ];

我将不得不做这样的事情：

 $scope.total = function() {
 var totalNumber = 0;
    for(i=0; i<revenues.length; i++){
      totalNumber = totalNumber + revenues[i].amount
    }
    }

这是对的吗？如果我动态更改收入数组，它会实时更新吗？

正如承诺的那样，这是一种不同的方法。 监视revenues集合并在每次更改时更新值：

<div ng-app ng-controller="SumCtrl">
  Total: {{total}}
  <input type="text" ng-model="newAmount" />
  <button ng-click="add(newAmount)">Add</button>
</div>

而 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();
  });
}

有几种方法可以解决这个问题。 如果你想要一个total()函数，它是这样的：

<div ng-app ng-controller="SumCtrl">
  Total: {{total()}}
  <input type="text" ng-model="newAmount" />
  <button ng-click="add(newAmount)">Add</button>
</div>

这是代码：

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

每当范围发生变化（很多）时，total()函数都会重新评估。 更好的方法是监视revenues更改并更新静态值...我也会发布这个答案。

这是一个 plunker

有多种方法可以执行此操作，并且控制器的外观可能会有所不同，具体取决于工厂数据的外观。

编辑：当我写作时，这里发布了几个很好的答案。这与布莱恩的第一种方法相似。

相关文章：