ngSwitch directive is used to conditionally swap DOM structure on your template based on a scope expression. Elements within
ngSwitch but without
ngSwitchDefault directives will be preserved at the location as specified in the template.
The directive itself works similar to ngInclude, however, instead of downloading template code (or loading it from the template cache),
ngSwitch simply chooses one of the nested elements and makes it 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
on="..." attribute (or the
ng-switch="..." attribute), define any inner elements inside of the directive and place a when attribute per element. The when attribute is used to inform ngSwitch which element to display when the on expression is evaluated. If a matching expression is not found via a when attribute then an element with the default attribute is displayed.
ng-switch-when="someVal"will match against the string
"someVal"not against the value of the expression
<ANY ng-switch="expression"> <ANY ng-switch-when="matchValue1">...</ANY> <ANY ng-switch-when="matchValue2">...</ANY> <ANY ng-switch-default>...</ANY> </ANY>
|ngSwitch | on|| || |
expression to match against
|enter||after the ngSwitch contents change and the matched child element is placed inside the container|
|leave||after the ngSwitch contents change and just before the former contents are removed from the DOM|
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 3.0.