javascript – Angular – 使用函数对数字求和并将其放在视图中

前端之家收集整理的这篇文章主要介绍了javascript – Angular – 使用函数对数字求和并将其放在视图中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试创建一个函数来汇总来自工厂的一些数字(以及来自客户端的一些实时),并将总和放在视图中.完全卡住了.

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

所以,假设我有类似的东西:

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

}

如何在视图中显示totalNumber?

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

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
    }

    }

它是否正确?如果我动态更改收入数组,它会实时更新吗?

解决方法

正如所承诺的,这是一种不同的方法.观察收入收集并在每次更改时更新值的人:
<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: 543 }
  ];

  $scope.add = function(value) {
    $scope.revenues.push({ amount: parseInt(value) });
  }

  $scope.$watchCollection("revenues",function() {
    $scope.total = total();
  });

}

猜你在找的JavaScript相关文章