来自不同ng-repeat Angular js的求和值

I want to sum three values from different ng-repeat in my view, this is what I have.

在我看来，我想从不同的ng-repeat中总结三个值，这就是我所拥有的。

<tr ng-repeat="a in data1">
  <td>a.num1</td>
</tr>
<tr ng-repeat="b in data2">
  <td>b.num2</td>
</tr>
<tr ng-repeat="c in data3">
  <td>c.num3</td>
</tr>
<tr>
  <td>(Here I want to print the sum of the three values)</td>
</tr>

I have this in my controller.

我在控制器中有这个。

    $scope.data1 = [
        {
          "num1": 1,
        }
    ]
    $scope.data2 = [
         {
           "num2": 2,
         }
    ]

    $scope.data3 = [
        {
           "num3": 3,
        }
   ]

The binding is ok, I print the values coming from each ng-repeat but I need to sum does values and print the result in the last

绑定没问题，我打印来自每个ng-repeat的值，但是我需要对值进行求和并在最后输出结果

Some help with this will be great!

一些帮助将是伟大的！

4 个解决方案

#1

Try this:

尝试这个：

//in your controller side added this method

//在你的控制器端添加了这个方法

$scope.getTotal = function(){
    var total = 0;
    angular.forEach($scope.data1, function(data1) { 
        total += data1.num1;
    }
    angular.forEach($scope.data2, function(data2) { 
        total += data2.num2;
    }
    angular.forEach($scope.data3, function(data3) { 
        total += data3.num3;
    }
    return total;
}


<td>{{ getTotal() }}</td>//Here is the total value

#2

In your controller do this :

在您的控制器中执行此操作

$scope.sum = $scope.data1[0].num1 + $scope.data2[0].num2 + $scope.data3[0].num3;

And assign the sum in td as below:

并在td中分配总和如下：

<tr><td>{{sum}}</td></tr>

#3

you also can use ng-repeat-start and ng-repeat-end to access value outside ng-repeat

您还可以使用ng-repeat-start和ng-repeat-end来访问ng-repeat之外的值

like this

喜欢这个

<body ng-app="myApp" ng-controller="MyCtrl">
<h1>Hello Plunker!</h1>

<table>
  <tr ng-repeat-start="a in data1">
      <td>{{a.num1}}</td>
  </tr>
  <tr ng-repeat-start="b in data2">
      <td>{{b.num2}}</td>
  </tr>
  <tr ng-repeat-end>
    <td>{{a.num1 + b.num2}} </td>
  </tr>
  <tr ng-repeat-end></tr>
</table>

for more information ng-repeat-start

了解更多信息ng-repeat-start

#4

This question may have been already answered but this may help. its more of a design pattern than an answer. it does involve rewriting some of your code.

这个问题可能已经得到解答，但这可能有所帮助。它更像是一种设计模式，而不是一种答案。它确实涉及重写你的一些代码。

By organizing data around one object you have more flexibility when it comes to dynamically creating / mutating data.

通过围绕一个对象组织数据，您在动态创建/变异数据时可以获得更大的灵活性。

angular.module('app',[])
.controller('bazContoller',function($scope){

let things = { //controller name or namespace
      enums:{ //enumerable's used by the controller
        data1:[ 
          { "num": 1 }
        ],
        data2:[ 
          { "num": 2 }
        ],
        data3:[ 
          { "num": 67 }
        ]
      },
  
      sum(){
      return Object.keys(this.enums).map(item => this.enums[item])
        .reduce((start ,item)=>start += item[0].num,0);
      }
  }

  Object.assign(this ,things) ; //controller as 
  //$scope['bazContoller'] = things; //$scope
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
  <div ng-controller='bazContoller as baz'>
    <table>
        <tr ng-repeat="a in baz.enums.data1">
      <td>{{a.num}}</td>
    </tr>
    <tr ng-repeat="b in baz.enums.data2">
      <td>{{b.num}}</td>
    </tr>
    <tr ng-repeat="c in baz.enums.data3">
      <td>{{c.num}}</td>
    </tr>
    <tr>
      <td>SUM: {{baz.sum()}}</td>
    </tr>
    </table>
  
  </div>
</div>

#1