Menu
I am using ng-repeat to form the rows in a table. For each row I need to display some data that needs to span across all the cells of that row.
<tr ng-repeat="cr in results.crs">
<td>cell 1</td>
<td>cell 2</td>
</tr>
I want something like this-
<tr ng-repeat="cr in results.crs">
<td>cell 1</td>
<td>cell 2</td>
</tr >
<td colspan=2>The Special Cell</td>
<tr>
</tr>
However ,ng-repeat doesn't allow two rows per repeat.I tried doing the following but doesn't work.
<tr ng-repeat="cr in results.crs">
<td>cell 1</td>
<td>cell 2</td>
</tr >
<td>The Special Cell</td>
<tr>
</tr>
Is there a way to add two rows per repeat?
Also,can anyone suggest any alternative way to do it? I am using table structure since its easier to design and I have basic knowledge of HTML+CSS.
214
NEST TWO ng-repeatThe first ng-repeat in the tr tag will create the rows and the second one in the td tag will create one column per element in the collection. By using one ng-repeat for the row and an other for the column, the rows and the columns of your table is now driven by a subset.
You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
However, some directives, such as ng-controller and ng-repeat, create new child scopes and attach the child scope to the corresponding DOM element.
The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
use
<tr ng-repeat-start="cr in results.crs">
<td>cell 1</td>
<td>cell 2</td>
</tr >
<tr ng-repeat-end>
<td>The Special Cell</td>
</tr>
see https://docs.angularjs.org/api/ng/directive/ngRepeat
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
