CODEWITHSUNDEEP
htmlangularjsdartangular-dart
r455
r455

Reputation: 143

AngularDart ng-repeat in tables?

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..

Upvotes: 4

Views: 438

Answers (2)

Robert Jack Will
Robert Jack Will

Reputation: 11531

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]];

Upvotes: 0

vil
vil

Reputation: 947

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

Upvotes: 1

Related Questions