139 lines
2.3 KiB
Plaintext
139 lines
2.3 KiB
Plaintext
|
|
p.location-badge.
|
|
exported from <a href='../directives'>angular2/directives</a>
|
|
defined in <a href="https://github.com/angular/angular/tree/2.0.0-alpha.33/modules/angular2/src/directives/ng_for.ts#L4-L117">angular2/src/directives/ng_for.ts (line 4)</a>
|
|
|
|
:markdown
|
|
The `NgFor` directive instantiates a template once per item from an iterable. The context for
|
|
each instantiated template inherits from the outer context with the given loop variable set
|
|
to the current item from the iterable.
|
|
|
|
It is possible to alias the `index` to a local variable that will be set to the current loop
|
|
iteration in the template context.
|
|
|
|
When the contents of the iterator changes, `NgFor` makes the corresponding changes to the DOM:
|
|
|
|
* When an item is added, a new instance of the template is added to the DOM.
|
|
* When an item is removed, its template instance is removed from the DOM.
|
|
* When items are reordered, their respective templates are reordered in the DOM.
|
|
|
|
# Example
|
|
|
|
```
|
|
<ul>
|
|
<li *ng-for="#error of errors; #i = index">
|
|
Error {{i}} of {{errors.length}}: {{error.message}}
|
|
</li>
|
|
</ul>
|
|
```
|
|
|
|
# Syntax
|
|
|
|
- `<li *ng-for="#item of items; #i = index">...</li>`
|
|
- `<li template="ng-for #item of items; #i = index">...</li>`
|
|
- `<template ng-for #item [ng-for-of]="items" #i="index"><li>...</li></template>`
|
|
|
|
|
|
|
|
.l-main-section
|
|
h2 Annotations
|
|
.l-sub-section
|
|
h3.annotation Directive
|
|
pre.prettyprint
|
|
code.
|
|
@Directive({selector: '[ng-for][ng-for-of]', properties: ['ngForOf'], lifecycle: [LifecycleEvent.onCheck]})
|
|
|
|
|
|
.l-main-section
|
|
h2 Members
|
|
.l-sub-section
|
|
h3 constructor
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef, pipes: Pipes, cdr: ChangeDetectorRef)
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 viewContainer
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 templateRef
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 pipes
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 cdr
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 ngForOf
|
|
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.l-sub-section
|
|
h3 onCheck
|
|
|
|
|
|
pre.prettyprint
|
|
code.
|
|
onCheck()
|
|
|
|
:markdown
|
|
|
|
|
|
|
|
|
|
|
|
|