4

I'm trying to iterate over lists with sublists, and printing 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 would 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 the need to put in spans..

2 Answers 2

1

Only table tags (td, th, tr, tbody...) inside of <table> tag are shown, you should add ng-repeat to <tr>

If you use angular1.2 or higher you can use ng-repeat-start and ng-repeat-end tags:

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 JSfiddle

Here is fiddle with nested lists

1
  • AngularDart does not have ng-repeat-start
    – r455
    Aug 26, 2014 at 7:56
0

This question is really old and AngularDart has changed a lot in the meantime. We can use the <ng-container> tag to apply all kinds of directives to a group of tags which are to be repeated or put under an *ngIf and so forth. The <ng-container> tag will not appear in the DOM output, but its contents will be there and affected by 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]];

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.