Question

我在使用AngularJS合并表格单元时遇到问题，我想使用rowspan将具有相同数据的数据与下一行合并。但我的问题是检查数据。

当前输出：

预期产量：

这是我目前的代码：

<div>
   <div class="divider"></div>
      <div class="table-responsive">
          <table class="table table-bordered">
              <thead>
                  <tr>
                      <th class="col-xs-1">Report Trail ID</th>
                      <th class="col-xs-5">Field Name</th>
                      <th class="col-xs-6">Change</th>
                  </tr>
              </thead>
              <tbody>
                  <tr ng-show="dataEntryCtrl.auditTrail == 0">
                      <td colspan="6" align="center">No records found.</td>
                  </tr>
                  <tr dir-paginate="audit in dataEntryCtrl.auditTrail | itemsPerPage:10" pagination-id="paginate2">
                      <td class="text-center">
                          {{dataEntryCtrl.reportTrailId}}
                      </td>
                      <td>
                          {{audit.FieldName}}
                      </td>
                      <td ng-bind-html="dataEntryCtrl.trusthtml(audit.Changes)">
                      </td>
                   </tr>
               </tbody>
          </table>
     </div>
</div>

你对此有什么想法吗？

使用@Himanshu Aggarwal代码更新结果：

Answer 1

我认为您必须对数据进行一些预处理以确定是否有多行，我在下面有一个示例：

＆＃13;

(function() {

  angular
    .module("app", ["ui.bootstrap"]);

  angular
    .module("app")
    .controller("AppController", AppController);

  AppController.$inject = ["$scope"];

  function AppController($scope) {
    var vm = this;

    setup();

    function setup(){
      vm.myArray = loadData();
      calculateRows();
    }


    function loadData() {
     return [{
        "reportTrailId": 658,
        "fieldName": "Manufacturer 1",
        "change": "<span>change 1</span>"
      }, {
        "reportTrailId": 659,
        "fieldName": "Manufacturer 2",
        "change": "<span>change 2</span>"
      }, {
        "reportTrailId": 660,
        "fieldName": "Manufacturer 2",
        "change": "<span>change 3</span>"
      }, {
        "reportTrailId": 661,
        "fieldName": "Manufacturer 3",
        "change": "<span>change 4</span>"
      }, ];
    }

    function calculateRows() {
      if (vm.myArray.length > 0) {
        vm.myArray[0].matchPreviousRow=false;
        for (var i = 0; i < vm.myArray.length; i++) {
          var field = vm.myArray[i].fieldName;
          var rows = 1;
          for (var j = i + 1; j < vm.myArray.length; j++) {
            if (vm.myArray[j].fieldName === field && ! vm.myArray[j].matchPreviousRow) {
              rows++;
              vm.myArray[j].matchPreviousRow=true;
            } else {
              vm.myArray[j].matchPreviousRow=false;
              break;
            }
          }
          vm.myArray[i].rows = rows;
        }
      }
    }


  }


})();

＆＃13;

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script data-require="angular.js@1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
  <script data-require="ui-bootstrap@*" data-semver="2.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
</head>

<body ng-controller="AppController as vm">
  
<div>
      <div class="table-responsive">
          <table class="table table-bordered">
              <thead>
                  <tr>
                      <th class="col-xs-1">Report Trail ID</th>
                      <th class="col-xs-5">Field Name</th>
                      <th class="col-xs-6">Change</th>
                  </tr>
              </thead>
              <tbody>
                  <tr ng-show="dataEntryCtrl.auditTrail == 0">
                      <td colspan="6" align="center">No records found.</td>
                  </tr>
                  <tr ng-repeat="item in vm.myArray">
                      <td class="text-center">
                          {{item.reportTrailId}}
                      </td>
                      <td rowSpan="{{item.rows}}" ng-if="! item.matchPreviousRow">
                          {{item.fieldName}}
                      </td>
                      <td>
                        {{item.change}}
                      </td>
                   </tr>
               </tbody>
          </table>
     </div>
</div>
  


</body>

</html>

＆＃13;

Answer 2

您需要管理2个组件才能获得所需的结果： 1）html：您可以使用“rowspan”属性来合并单元格 2）数据源：您需要使用以下结构将数据绑定到html：

[{ 
   "change": "sdf", 
   "rows": [
        {
            "reportTrailId": 658
            "fieldName": "Manufacturer name"
        },
        ...
},...]

Answer 3

试试这个，使用$index -

<tr dir-paginate="audit in dataEntryCtrl.auditTrail | itemsPerPage:10" pagination-id="paginate2">
    <td class="text-center">
        {{dataEntryCtrl.reportTrailId}}
    </td>
    <td>
        {{audit.FieldName}}
    </td>
    <td ng-if="(audit.Changes === dataEntryCtrl.auditTrail[$index + 1].Changes)" rowspan="(audit.Changes === dataEntryCtrl.auditTrail[$index + 1].Changes) ? 2 : ''" ng-bind-html="dataEntryCtrl.trusthtml(audit.Changes)">
    </td>
    <td ng-if="(audit.Changes !== dataEntryCtrl.auditTrail[$index - 1].Changes)" ng-bind-html="dataEntryCtrl.trusthtml(audit.Changes)">
    </td>
</tr>

使用AngularJS合并表格单元格

3 个答案: