使用不一致的列数据构建表

Question

我需要在数据上使用angular来构建HTML表，这些数据在不同的行中具有不一致的列数。我需要为任何特定行中具有较少列数的列显示阴影单元格。例如 -

数据：

a,b,c,d
1,2,3
4,5,6,7
8,9,10,11,12

预期输出

可以使用ng-repeat或其他方式实现此行为吗？

Answer 1

您可以找到最大的项目集合，然后循环它以创建td。以下是一个工作示例，阅读代码注释以了解其工作原理：

＆＃13;

＆＃13;

angular.module('app', [])
  .controller('ctrl', function($scope) {
    // The original data
    let data = 'a,b,c,d\n1,2,3\n4,5,6,7\n8,9,10,11,12';

    // Create arrays out of the original data. This will be used to render the table
    $scope.data = data.split('\n')
      .map(item => item.split(','));

    // Find the maximum number of elements so that we can create that much td elements
    $scope.max = Math.max(...$scope.data.map(item => item.length));

    // Helper function to create an array out of given length
    $scope.getArray = length => new Array(length);
  });

＆＃13;

td {
  border: 1px solid black;
  width: 50px;
}

.blank {
  background-color: lightgray;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <table>
    <!--Loop over the rows of data-->
    <tr ng-repeat="row in data">
      <!--Loop over an empty array-->
      <td ng-repeat="_ in getArray(max) track by $index" ng-class="{blank: !row[$index]}">
        {{row[$index]}}
      </td>
    </tr>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

为了清除不可用的项目，它使用ng-class指令将blank类分配给td，然后使用CSS对其进行着色。