Merge identical cells using Angularjs

Question

I want to know if there is a way to dynamically merge identical cells, using angularjs, in the picture below, if I have 2 with the same value for each.

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

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

So I need to calculate dynamically the number of identical cells and at the same time get a table, not stairs :D because I tried to make

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

and I got some beautiful stairs... I need your help

I am using it inside an ng-repeat. Here's my code:

 <tr ng-repeat="rowContent in rows track by $index">
<td>{{rowContent}}</td>
<td>{{rowContent}}</td>
<td>{{rowContent}}</td>
 </tr>

If the same value occurs more than once, I should merge the cells and get this result:

I am using Angular 1.X I really need help on this part. Thank you

Answer 1

ng-repeat can not do that.

You need to preprocess your data array, look for duplicates and make another array with each element as an object with value and frequency. ng-repeat over the new array and assign height of row based on frequency (you may use ng-style to dynamically bind height)

Answer 2

try this:

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

Answer 3

Here is a nested for-loop that check if array values are duplicate. It creates a new array of object which have a peroperty for rowspan:

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

Display the value with the following code:

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

Answer 4

You can try to use custom 'groupBy' filter for this. For example see this similar question. Code could look like this:

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