bvais bvais - 3 months ago 62
AngularJS Question

ngRepeat across pairs to build table with rowspan="2"

I have an array of pairs that I need to display in a table where the 1st column spans 2 rows like in the image.

The array looks like this:

$scope.products = [{
p0: {name: "n1", img: "a", brand: "apple", desc: "1"},
p1: {name: "n2", img: "b", brand: "apple", desc: "2"}
},{
p0: {name: "n3", img: "c", brand: "apple", desc: "3"},
p1: {name: "n4", img: "d", brand: "apple", desc: "4"}
},{
p0: {name: "n5", img: "e", brand: "apple", desc: "5"},
p1: {name: "n6", img: "f", brand: "apple", desc: "6"}
},{
p0: {name: "n7", img: "g", brand: "apple", desc: "7"},
p1: {name: "n8", img: "h", brand: "apple", desc: "8"}
}];


The "hardcoded" version of this would be

<table class="table table-bordered">
<tr>
<th></th>
<th>Brand</th>
<th>Product name</th>
</tr>
<tr>
<th rowspan="2">a b</th>
<td>apple</td>
<td>n1</td>
</tr>
<tr>
<td>apple</td>
<td>n2</td>
</tr>
<tr>
<th rowspan="2">c d</th>
<td>apple</td>
<td>n3</td>
</tr>
<tr>
<td>apple</td>
<td>n4</td>
</tr>
</table>


I don't know how I can achieve this with an ng-repeat. I tried something silly like the code below but obviously it didn't work.
Help?

<div ng-repeat="pair in products">
<tr>
<th rowspan="2">{{pair.p0.img}} {{pair.p1.img}}</th>
<td>{{pair.p0.brand}}</td>
<td>{{pair.p0.name}}</td>
</tr>
<tr>
<td>{{pair.p1.brand}}</td>
<td>{{pair.p1.name}}</td>
</tr>
</div>


enter image description here

Answer

May you use a cunstruction like:

<tbody ng-repeat="...">
   <tr>...</tr>
   ...
</tbody>

in your example?

Comments