Возможно ли, чтобы ng-for не был привязан к какому-либо элементу?

Например, допустим, у меня есть список объектов foo, которые сами содержат полосы. Затем я хочу перебрать как foos, так и bars, не вкладывая их.

Многие другие фреймворки поддерживают это (гипотетически) следующим образом:

<table>
{% for foo in foos %}
  <tr>first level tr</tr>
  {% for bar in foo.bars %}
    <tr>same level as above tr</tr>
  {% endfor %}
{% endfor %}
</table>

Но в angular вам нужно прикрепить ng-for к фактическому элементу, или вы можете сделать что-то похожее на приведенное выше?

0
David The Man 29 Окт 2015 в 14:52

2 ответа

Лучший ответ

Хорошие новости: это возможно. Плохие новости: пока вы должны использовать каноническая форма * ng-for для этого:

<template ng-for #foo [ng-for-of]="foos">
  Put your template here
</template>

Позже вы можете написать это так (см. этот выпуск на github):

<template *ng-for="#foo from foos">
  Put your template here
</template>

Но это еще не реализовано.

Итак, пока ваш пример выглядит так (см. этот плункер):

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

@Component({
  selector: 'my-app',
  directives: [NgFor],
  template: `
    <table>
      <template ng-for #foo [ng-for-of]="foos">
        <tr><td>first level tr</td></tr>
        <template ng-for #bar [ng-for-of]="foo.bars">
          <tr><td>same level as above tr</td></tr>
        </template>
      </template>
    </table>
  `
})
export class App {
  constructor() {
    this.foos = [
      { bars: ['bar1', 'bar2', 'bar3'] },
      { bars: ['some1', 'some2', 'some3'] }
    ]
  }
}
1
alexpods 30 Окт 2015 в 07:39

Уход, сейчас его изменили:

SELECTORS [ngFor][ngForOf]
<template ngFor #item [ngForOf]="items" #i="index"><li>...</li></template>

https://angular.io/docs/ts/latest/api/common/NgFor-directive.html

0
Buggy 20 Апр 2016 в 19:18