问相同的数据合并
EN

Stack Overflow用户

提问于 2017-03-17 08:23:16

回答 1查看 819关注 0票数 0

在ng-repeat中，我有一个相同的月份，但不同的金额&类别。

我的问题是如果同一个月不应该循环那个月的<td></td>

<table>
    <tbody>
     <tr ng-repeat="data in myCtrl.value">
        <td class="text-center">{{data.month}}</td>
        <td class="text-center">{{data.amountval}}</td>
        <td class="text-center">{{data.categoryval}}</td>
     </tr>
  </tbody>
</table>

angularjs

angularjs-ng-repeat

回答 1

Stack Overflow用户

发布于 2017-03-17 09:29:43

您可以按月份对数据进行分组，并在表中应用行跨度。

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.finalLoopData = {};
  $scope.loopData = [{month:'Jan',amountval:'30',categoryval:'50'},
  {month:'Jan',amountval:'30',categoryval:'50'},
  {month:'Jan',amountval:'30',categoryval:'50'},
  {month:'Jan',amountval:'30',categoryval:'50'},
  {month:'Feb',amountval:'30',categoryval:'50'},
  {month:'Feb',amountval:'30',categoryval:'50'},
  {month:'Feb',amountval:'30',categoryval:'50'},
  {month:'Feb',amountval:'30',categoryval:'50'}
  ];
  
  $scope.arrayToObject = function () {
            var finalLoopData = {};
            angular.forEach($scope.loopData, function (value, key) {
                if (!finalLoopData[value.month]) { 
                    finalLoopData[value.month] = new Array();
                }
                finalLoopData[value.month].push(value);
            });
            $scope.finalLoopData = finalLoopData;
        }
        $scope.arrayToObject();
});

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js" data-semver="1.5.10"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <table>
    <tbody ng-repeat="monthGroup in finalLoopData">
     <tr ng-repeat="loopData in monthGroup">
        <td class="text-center" rowspan="{{monthGroup.length}}" ng-if="$index===0">{{loopData.month}}</td>
        <td class="text-center">{{loopData.amountval}}</td>
        <td class="text-center">{{loopData.categoryval}}</td>
     </tr>
  </tbody>
</table>
  </body>

</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42852502

复制

相似问题

问相同的数据合并
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问相同的数据合并EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问相同的数据合并
EN