CODEWITHSUNDEEP
angular
Aigars Beinarovičs
Aigars Beinarovičs

Reputation: 1

How can do ng-for in ng-for angularjs 2.0?

This code below does not work! How can i do ng-for inside a ng-for?

<ul *ng-for="#item of items">
    <li *ng-for="#task of item.tasks">{{task.title}}</li>
</ul>

Upvotes: 0

Views: 7768

Answers (1)

alexpods
alexpods

Reputation: 48477

One of the possible errors: you might forgot to specify NgFor or CORE_DIRECTIVES in directives property of the View decorator:

import {Component, View, NgFor} from 'angular2/angular2';

@Component()
@View({
  template: `...`,
  directives: [NgFor] // <- You might forgot to do this
})
export class SomeCompoennt { ... }

See this plunker also

UPD Problem with this your plunker

The problem is that p (paragraph element) cannot contain block elements. See this.

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

So browser converts any nested ps:

<p>
  <p>
    <p>
    </p>
  </p>
</p>

into flat structure:

<p></p>
<p></p>
<p></p>

So code:

<p *ng-for="#person of peopleService.people">
  {{person.name}}
  <table>
      <tr *ng-for='#hobby of person.hobbies'>
          <td>{{hobby}</td>
      </tr>
  </table>
</p>

will be converted by browser into:

<p *ng-for="#person of peopleService.people">
  {{person.name}}
</p>
<table>
  <tr *ng-for='#hobby of person.hobbies'>
    <td>{{hobby}</td>
  </tr>
</table>

Of course person is undefined in this situation.

Upvotes: 3

Related Questions