Question

我想在我的观点中总结来自不同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>

我在控制器中有这个。

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

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

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

对此的一些帮助将会很棒！

Answer 1

在您的控制器中执行以下操作：

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

并在td中分配总和如下：

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

Answer 2

试试这个：

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

$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

Answer 3

您还可以使用ng-repeat-start和ng-repeat-end来访问ng-repeat

之外的值

喜欢这个

<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>

了解更多信息ng-repeat-start

Answer 4

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

通过围绕一个对象组织数据，您在动态创建/变异数据方面具有更大的灵活性。

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>

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

4 个答案: