AngularDart ng-repeat on tables?
I am trying to iterate over comboboxes and print them as <tr>
without much success.
This code illustrates what I want to accomplish:
<table>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<span ng-repeat='x in [["a1","a2"],["b1","b2"],["c1","c2"]]'>
<tr>{{x.length}}<tr>
<span ng-repeat='y in x'>
<tr>{{y}}<tr>
</span>
</span>
</table>
I expect this to show:
<table>
<tr>3</tr>
<tr>a1</tr>
<tr>a2</tr>
<tr>b1</tr>
// and so on..
</table>
what should i do to make this work? I want to be able to repeat without having to insert time intervals.
source to share
Only table tags (td, th, tr, tbody ...) inside the tag are displayed <table>
, you must add ng-repeat in<tr>
If you are using angular1.2 or higher you can use tags ng-repeat-start
and ng-repeat-end
:
HTML:
<table ng-controller="apiCtrl">
<tr ng-repeat-start="item in foo" ng-init="first=item[0]">
<td>first: {{ first }}</td>
</tr>
<tr ng-repeat-end ng-init="last = item[1]">
<td>last: {{ last }}</td>
</tr>
</table>
JS:
function apiCtrl($scope) {
$scope.foo = [
['one', 'uno'],
['two', 'dos'],
['three', 'tres']
];
}
Here is the JSfiddle
Here is a script with nested lists
source to share
This question is really old and in the meantime AngularDart has changed a lot. We can use <ng-container>
to apply all kinds of directives to a group of tags that need to be repeated or placed in *ngIf
and so on. The tag <ng-container>
will not appear in the DOM output, but its content will be there and will depend on the specified directive.
<table>
<ng-container *ngFor="let row of matrix">
<tr>
<ng-container *ngFor="let value of row">
<td>{{value}}</td>
</ng-container>
<tr>
</ng-container>
</table>
When your component.dart has:
List<List<int>> get matrix => [[1, 2, 3], [4, 5, 6]];
source to share