Question

我坚持每个月获得正确的总收入（媒体总成本，总收入和总利润）。我为此创造了一个plunker。求你帮忙吗？

Plunker http://plnkr.co/edit/7taIugnhGPZbqCMGpUza?p=preview

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

Answer 1

以下是工作示例：http://plnkr.co/edit/bB7up1rhOSad9Xoq3SsQ?p=preview

最好使用现有的rows数组并在每个行对象中推送总数，而不是在范围内创建单独的变量。

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

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

Answer 2

你使用相同的变量两次，它给你两个表的最后一个数组的totalMediaCost

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

Answer 3

我已经对你的方法进行了一些编辑。查看this plunker。

JS：

$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);
    }
  }

HTML：

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

使用Angular的HTML表中的行总和不正确

3 个答案: