Question

我是Angularjs的新手。我正在使用ng-repeat显示项目列表。如何计算它的总和？是否有任何简单的方法来使用表达式在html中计算它？

name  numberofyears amount interest 
 xxx       2          4000   4%
 yyy       3          3000   10%
 zzz       5          6000    6%

 Total     10        13000   16%

前三行来自ng repeat。我只想计算总数，如上所示。提前致谢

这与Calculating sum of repeated elements in AngularJS ng-repeat这个问题非常相似。但不完全是。我正在尝试使用表达式来计算，因为我有很多行

Answer 1

可以这样做，但我认为这种逻辑最适合你的控制器。无论如何，这是实现你要求使用ng-init的可能方式：

 <table ng-init="items.total = {}">
    <tr>
      <td>name</td>
      <td>numberofyears</td>
      <td>amount</td>
      <td>intrest</td>
    </tr>
    <tr ng-repeat="item in items">
      <td>{{item.name}}</td>
      <td ng-init="items.total.numberofyears = items.total.numberofyears + item.numberofyears">{{item.numberofyears}}</td>
      <td ng-init="items.total.amount = items.total.amount + item.amount">{{item.amount}}</td>
      <td ng-init="items.total.interest = items.total.interest + item.interest">{{item.interest}}%</td>
    </tr>
    <tr>
      <td>Total</td>
      <td>{{items.total.numberofyears}}</td>
      <td>{{items.total.amount}}</td>
      <td>{{items.total.interest}}%</td>
    </tr>
 </table>

Answer 2

正如评论中提到的那样 - 您将在控制器中求和并在ng-repeat之后显示求和值。

https://docs.angularjs.org/api/ng/directive/ngRepeat

ngRepeat指令为集合中的每个项目实例化一次模板。

因此，ng-repeat用于渲染，不适合业务逻辑。

Answer 3

在控制器中执行数学运算，然后您可以在<tr ng-if="$last"> </tr>中添加ng-repeat并显示最终结果

controller e.x - 简单的

function sum (object) {
    var data = object;
    var tmpSum

     for (var i in object){
      tmpSum =+ object[i].value;
    }

    $scope.sum = tmpSum 
};

查看e.x

<tr ng-if="$last">{{sum}} </tr>

计算ng重复Angularjs中的值之和

3 个答案: