2017-03-07 44 views
0

我想知道是否有一種方法來動態合併相同的單元格,使用angularjs,如下圖所示,如果我有2個相同的值。使用Angularjs合併相同的單元格

enter image description here

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

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

所以我需要動態計算完全相同的細胞的數量,並在同一時間得到一個表,而不是樓梯:d,因爲我試圖讓

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

和我得到了一些美麗的樓梯......我需要你的幫助

我在ng-repeat中使用它。 這裏是我的代碼:

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

如果出現同樣的價值超過一次,我要合併的單元格,並得到這樣的結果: enter image description here

我採用了棱角分明1.X 我真的需要幫助的這部分。 謝謝

回答

0

ng-repeat無法做到這一點。

您需要預處理您的數據數組,查找重複數據並將每個元素作爲另一個數組作爲具有值和頻率的對象。 NG重複在新的陣列和分配基於頻率行的高度(你可以使用NG風格的動態綁定的高度)

0

試試這個:

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

儘管此代碼可能回答此問題,但提供有關如何解決問題和/或解決問題原因的其他上下文會提高答案的長期價值。 –

0

這裏是一個嵌套的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> 
0

你可以嘗試使用自定義「GROUPBY」過濾器這一點。例如,參見類似的question。代碼可能如下所示:

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