Javascript HTML表格中使用角度的行数总和不正确_Javascript_Angularjs_Json

Javascript HTML表格中使用角度的行数总和不正确

javascript angularjs json

Javascript HTML表格中使用角度的行数总和不正确,javascript,angularjs,json,Javascript,Angularjs,Json,我每个月都要得到正确的总收入（总媒体成本、总收入和总利润）。我已经为同样的目标创建了一个plunker。你能帮忙吗普朗克 script.js var app = angular.module('plunker', []); app.controller('AppController',['$scope', function($scope) { $scope.total = function(i){ var totalMediaCost = 0; var t

我每个月都要得到正确的总收入（总媒体成本、总收入和总利润）。我已经为同样的目标创建了一个plunker。你能帮忙吗

普朗克

script.js

var app = angular.module('plunker', []);
app.controller('AppController',['$scope',
  function($scope) {
    $scope.total = function(i){
      var totalMediaCost = 0;
      var totalRevenue = 0;
      var totalProfit = 0;
      $scope.array = [];
        console.log('i.revenue', i.revenue);
        for (var data in i.revenue){
          console.log('data', data);
          totalMediaCost += i.revenue[data].a;
          totalRevenue += i.revenue[data].b;
          totalProfit += i.revenue[data].c;

        } 
      $scope.array.push({'totalMediaCost': totalMediaCost});

    }

    $scope.rows = [
    {
      "month": "Feb-01",
      "revenue": [
        {
          "account": {
          "id": 1,
          "name": "user alpha"
        },
          "a": 111,
          "b": 222,
          "c": 333
        },
        {
          "account": {
          "id": 2,
          "name": "user beta"
        },
          "a": 1,
          "b": 2,
          "c": 3,
        },
        {
          "account": {
          "id": 3,
          "name": "user gamma"
        },
          "a": 141,
          "b": 242,
          "c": 343
        }
      ]
     },
     {
      "month": "Mar-02",
      "revenue": [
      {
        "account": {
        "id": 1,
        "name": "user alpha"
      },
        "a": 100,
        "b": 200,
        "c": 300
      },
      {
        "account": {
        "id": 14,
        "name": "user beta"
      },
        "a": 101,
        "b": 202,
        "c": 303
      },
      {
        "account": {
        "id": 3,
        "name": "user gamma"
      },
        "a": 241,
        "b": 342,
        "c": 443
      }
     ]
    }
  ];

  }
]
);

index.html

<!doctype html>
<html ng-app="plunker">

<head>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
  <script src="script.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />
</head>

<body ng-controller="AppController">

  {{rows | json}}

  <hr>

  <table class="table">

    <tr>
      <th></th>
      <th>Account</th>
      <th>Media Cost</th>
      <th>Revenue</th>
      <th>Profit</th>
    </tr>
    <tbody ng:repeat="i in rows">
      <tr>
        <td rowspan="{{i.revenue.length+1}}">{{i.month}}</td>
        <tr ng:repeat="data in i.revenue">
          <td>{{data.account.name}}</td>
          <td>{{data.a}}</td>
          <td>{{data.b}}</td>
          <td>{{data.c}}</td>
        </tr>
        <tr ng-init="total(i)">
          <td></td>
          <td>Total Revenue</td>
          <td>{{array[0].totalMediaCost}}</td>
          <td>{{}}</td>
          <td>{{}}</td>
        </tr>
      </tr>
    </tbody>

  </table>

</body>
</html>


{{rows | json}}

账户
媒体成本
收入
利润
{{i.month}
{{data.account.name}
{{data.a}}
{{data.b}
{{data.c}}
总收入
{{数组[0].totalMediaCost}
{{}}
{{}}

您两次使用同一个变量，它为您提供两个表的最后一个数组的totalMediaCost

您应该将totalMediaCost更改为数组或类似的

以下是一个工作示例：

最好使用现有的

行

数组，将总数推送到每个行对象中，而不是在范围中创建单独的变量

我对您的方法进行了一些编辑。退房

JS:

HTML:


{{i.month}
{{data.account.name}
{{data.a}}
{{data.b}
{{data.c}}
全部的
{{总成本[$index]}
{{总收入[$index]}
{{利润总额[$index]}

$scope.total = function(i,index) {
    $scope.rows[index].totalMediaCost = totalMediaCost;
}

<tr ng-init="total(i,$index)">

$scope.total = {
    cost : [],
    revenue : [],
    profit : []
  };

  for (var month in $scope.rows) {
    if ($scope.rows.hasOwnProperty(month)) {
      var revData = $scope.rows[month]["revenue"],
          totalCost = 0,
          totalRevenue = 0,
          totalProfit = 0;

      revData.forEach(function (account) {
        totalCost += account["a"];
        totalRevenue += account["b"];
        totalProfit += account["c"];
      });

      $scope.total.cost.push(totalCost);
      $scope.total.revenue.push(totalRevenue);
      $scope.total.profit.push(totalProfit);
    }
  }

<tbody ng:repeat="i in rows">
     <tr>
      <td rowspan="{{i.revenue.length+1}}">{{i.month}}</td>
      <tr ng:repeat="data in i.revenue">
        <td>{{data.account.name}}</td>
        <td>{{data.a}}</td>
        <td>{{data.b}}</td>
        <td>{{data.c}}</td>
      </tr>
      <tr>
        <td></td>
        <td>Total</td>
        <td>{{total.cost[$index]}}</td>
        <td>{{total.revenue[$index]}}</td>
        <td>{{total.profit[$index]}}</td>
      </tr>
  </tr>
  </tbody>