61 lines
1.6 KiB
Plaintext
61 lines
1.6 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.32/modules/angular2/src/directives/ng_switch.ts#L19-L135">angular2/src/directives/ng_switch.ts (line 19)</a>
|
||
|
|
|
||
|
|
:markdown
|
||
|
|
The `NgSwitch` directive is used to conditionally swap DOM structure on your template based on a
|
||
|
|
scope expression.
|
||
|
|
Elements within `NgSwitch` but without `NgSwitchWhen` or `NgSwitchDefault` directives will be
|
||
|
|
preserved at the location as specified in the template.
|
||
|
|
|
||
|
|
`NgSwitch` simply chooses nested elements and makes them visible based on which element matches
|
||
|
|
the value obtained from the evaluated expression. In other words, you define a container element
|
||
|
|
(where you place the directive), place an expression on the **`[ng-switch]="..."` attribute**),
|
||
|
|
define any inner elements inside of the directive and place a `[ng-switch-when]` attribute per
|
||
|
|
element.
|
||
|
|
The when attribute is used to inform NgSwitch which element to display when the expression is
|
||
|
|
evaluated. If a matching expression is not found via a when attribute then an element with the
|
||
|
|
default attribute is displayed.
|
||
|
|
|
||
|
|
# Example:
|
||
|
|
|
||
|
|
```
|
||
|
|
<ANY [ng-switch]="expression">
|
||
|
|
<template [ng-switch-when]="whenExpression1">...</template>
|
||
|
|
<template [ng-switch-when]="whenExpression1">...</template>
|
||
|
|
<template ng-switch-default>...</template>
|
||
|
|
</ANY>
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
.l-main-section
|
||
|
|
h2 Members
|
||
|
|
.l-sub-section
|
||
|
|
h3 constructor
|
||
|
|
|
||
|
|
|
||
|
|
pre.prettyprint
|
||
|
|
code.
|
||
|
|
constructor()
|
||
|
|
|
||
|
|
:markdown
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.l-sub-section
|
||
|
|
h3 ngSwitch
|
||
|
|
|
||
|
|
|
||
|
|
:markdown
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|