Группа В AngularJS

Question

Привет Мне нужно вывести таблицу, которая похожа на таблицу из таблицы ниже. Я просто не могу назвать имя 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

Для groupping вы можете использовать функцию 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>

Answer 2

Это не весь раствор, но может стать отправной точкой для вас:

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 3

Вы можете сделать математику для процент, я верю в вас!

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