使用Angularjs合并相同的单元格

Question

我想知道是否有一种方法可以使用angularjs动态合并相同的单元格，如下图所示，如果我有2个具有相同值的每个单元格。

.as-console-wrapper {
  max-height: 100% !important;
}

所以我需要动态计算相同单元格的数量，同时得到一张桌子，而不是楼梯：D因为我试图制作

$scope.rows = ['Row 1', 'Row 2', 'Row 1'];

<td rowspan="2">{{row}}</td>

我有一些漂亮的楼梯......我需要你的帮助

我在ng-repeat中使用它。 这是我的代码：

<td rowspan="{{row.length}}">{{row}}</td>

如果同一个值出现多次，我应合并单元格并获得此结果：

我正在使用Angular 1.X 我真的需要这方面的帮助。 谢谢

Answer 1

ng-repeat不能那样做。

您需要预处理数据数组，查找重复项并创建另一个数组，将每个元素作为具有值和频率的对象。 对新数组进行ng-repeat并根据频率指定行的高度（可以使用ng-style动态绑定高度）

Answer 2

试试这个：

$scope.rows = ['Row 1', 'Row 2', 'Row 1'];
$scope.rows = $scope.rows.filter((v, i, a) => a.indexOf(v) === i);

Answer 3

这是一个嵌套的for循环，用于检查数组值是否重复。 它创建了一个新的对象数组，它具有行间的peroperty：

$scope.uniqueRows = [];

$scope.rows.forEach(function(r) {
    var duplicate = null;
    $scope.uniqueRows.forEach(function(ur) {
        if(r == ur.value) duplicate = r;
    });
    if(duplicate) duplicate.counter++;
    else $scope.uniqueRows.push({"value": r, "counter": 1});
});

使用以下代码显示值：

<tr ng-repeat="r in uniqueRows">
     <td rowspan="{{r.counter}}">{{r.value}}</td>
</tr>

Answer 4

您可以尝试使用自定义＆＃39; groupBy＆＃39;过滤器。例如，请参阅此类似question。代码可能如下所示：

 <tr ng-repeat="(index, rowContent) in rows | groupBy: 'name">