在 AngularJS 中分组

Question

你好，我需要从下面的代码 table 中输出一个 table，就像这样。我只是不能做 groupBY 名称。希望此视图看起来像

 Shareholder | Preferred Stock | Common Stock | Options | Percentage |
|-------------+-----------------+--------------+---------+------------|
| Robert      |              35 |           20 |      15 |        54% |
| Bert        |              20 |           20 |      10 |        38% |
| Elizabeth   |              10 |              |         |         8% |
| Total       |              65 |           40 |      25 |       100% |
*/

angular.module('myApp.view2', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view2', {
    templateUrl: 'view2/view2.html',
    controller: 'View2Ctrl'
  });
}])



.controller('View2Ctrl', ['$scope', function($scope) {
    $scope.transactions = [
    { security: 'Preferred Stock',  name: 'Robert',    value: 5,   date: '2014-1-3' },
    { security: 'Preferred Stock',  name: 'Robert',    value: 5,   date: '2014-1-5' },
    { security: 'Common Stock',     name: 'Bert',      value: 20,  date: '2014-1-6' },
    { security: 'Preferred Stock',  name: 'Elizabeth', value: 10,  date: '2014-1-6' },
    { security: 'Common Stock',     name: 'Robert',    value: 20,  date: '2014-1-9' },
    { security: 'Preferred Stock',  name: 'Bert',      value: 20,  date: '2014-1-11' },
    { security: 'Preferred Stock',  name: 'Robert',    value: 5,   date: '2014-1-12' },
    { security: 'Preferred Stock',  name: 'Robert',    value: 15,  date: '2014-1-12' },
    { security: 'Options',          name: 'Bert',      value: 10,  date: '2014-1-13' },
    { security: 'Preferred Stock',  name: 'Robert',    value: 5,   date: '2014-1-14' },
    { security: 'Options',          name: 'Robert',    value: 15,  date: '2014-1-17' }
    ];
}]);

Answer 1

这不是完整的解决方案，但可能是您的起点：

var grouped = {};
$scope.transactions.forEach(function (tx) {
  var group;
  if (grouped.name) {
    group = grouped.name;
  } else {
    group = {name: tx.name};
    group[name] = group;
  }
  if (group[tx.security]) {
    group[tx.security] += tx.value;
  } else {
    group[tx.security] = tx.value;
  }
});

Answer 2

你会计算百分比，我相信你！

var transactions = [
    { security: 'Preferred Stock',  name: 'Robert',    value: 5,   date: '2014-1-3' },
    { security: 'Preferred Stock',  name: 'Robert',    value: 5,   date: '2014-1-5' },
    { security: 'Common Stock',     name: 'Bert',      value: 20,  date: '2014-1-6' },
    { security: 'Preferred Stock',  name: 'Elizabeth', value: 10,  date: '2014-1-6' },
    { security: 'Common Stock',     name: 'Robert',    value: 20,  date: '2014-1-9' },
    { security: 'Preferred Stock',  name: 'Bert',      value: 20,  date: '2014-1-11' },
    { security: 'Preferred Stock',  name: 'Robert',    value: 5,   date: '2014-1-12' },
    { security: 'Preferred Stock',  name: 'Robert',    value: 15,  date: '2014-1-12' },
    { security: 'Options',          name: 'Bert',      value: 10,  date: '2014-1-13' },
    { security: 'Preferred Stock',  name: 'Robert',    value: 5,   date: '2014-1-14' },
    { security: 'Options',          name: 'Robert',    value: 15,  date: '2014-1-17' }
    ];

var summary = [];
var total = {name: 'Total', 'Preferred Stock': 0, 'Common Stock': 0, 'Options': 0};

for(var i = 0; i < transactions.length; i++) {
  var sec = transactions[i].security;
  var val = transactions[i].value;
  total[sec] += val;

  var found = false;
  for(var j = 0; j < summary.length; j++) {
    if(transactions[i].name === summary[j].name) {
      summary[j][sec] += val;
      found = true;
    }
  }

  if(!found) {
    var item = {name: transactions[i].name, 'Preferred Stock': 0, 'Common Stock': 0, 'Options': 0 };
    item[sec] += val;
    summary.push(item);
  }
}

summary.push(total);

console.log(summary);

Answer 3

对于分组，您可以使用 reduce 函数

angular.module('myApp.view2', [])
  .controller('View2Ctrl', ['$scope', '$filter',
    function($scope, $filter) {

      $scope.securities = ['Preferred Stock', 'Common Stock', 'Options'];

      $scope.transactions = [{
        security: 'Preferred Stock',
        name: 'Robert',
        value: 5,
        date: '2014-1-3'
      }, {
        security: 'Preferred Stock',
        name: 'Robert',
        value: 5,
        date: '2014-1-5'
      }, {
        security: 'Common Stock',
        name: 'Bert',
        value: 20,
        date: '2014-1-6'
      }, {
        security: 'Preferred Stock',
        name: 'Elizabeth',
        value: 10,
        date: '2014-1-6'
      }, {
        security: 'Common Stock',
        name: 'Robert',
        value: 20,
        date: '2014-1-9'
      }, {
        security: 'Preferred Stock',
        name: 'Bert',
        value: 20,
        date: '2014-1-11'
      }, {
        security: 'Preferred Stock',
        name: 'Robert',
        value: 5,
        date: '2014-1-12'
      }, {
        security: 'Preferred Stock',
        name: 'Robert',
        value: 15,
        date: '2014-1-12'
      }, {
        security: 'Options',
        name: 'Bert',
        value: 10,
        date: '2014-1-13'
      }, {
        security: 'Preferred Stock',
        name: 'Robert',
        value: 5,
        date: '2014-1-14'
      }, {
        security: 'Options',
        name: 'Robert',
        value: 15,
        date: '2014-1-17'
      }];

      function addValue(obj, name, el) {

        var group = obj.securities[name],
          result = [];
        if (!group) {
          obj.securities[name] = group = {
            name: name
          };
          result.push(group);
        }
        group[el.security] = (group[el.security] || 0) + el.value;
        group['all'] = (group['all'] || 0) + el.value;

        return result;
      }

      function fixPercent(transactions, total) {
        var totalPercent = 0;
        transactions.forEach(function(el) {
          el.percent = Math.round(100 * el.all / total.all);
          totalPercent += el.percent;
        });

        transactions[transactions.length - 1].percent += 100 - totalPercent;
      }

      var grouppedTransactions = $scope.transactions.reduce(function(acc, el) {
        acc.total = addValue(acc, 'Total', el)[0] || acc.total;
        acc.result = acc.result.concat(addValue(acc, el.name, el));

        return acc;
      }, {
        securities: {},
        result: [],
        total: {}
      });
      $scope.grouppedTransactions = $filter('orderBy')(grouppedTransactions.result, '-all');
      $scope.total = grouppedTransactions.total;
      fixPercent($scope.grouppedTransactions, $scope.total);
    }
  ]);

table,
td,
th {
  border: 1px solid black;
  border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<div ng-app="myApp.view2" ng-controller="View2Ctrl">
  <table>
    <thead>
      <tr>
        <th>Shareholder</th>
        <th>Preferred Stock</th>
        <th>Common Stock</th>
        <th>Options</th>
        <th>Percentage</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="sec in grouppedTransactions">
        <td>{{sec.name}}</td>
        <td ng-repeat="secutiry in securities">{{sec[secutiry]}}</td>
        <td>{{sec.percent}}%</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>{{total.name}}</td>
        <td ng-repeat="secutiry in securities">{{total[secutiry]}}</td>
        <td>100%</td>
      </tr>
    </tfoot>
  </table>
</div>

在 AngularJS 中分组

Group By in AngularJS

javascript

database

group-by

angularjs