ngSwitch
ng
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.
The directive itself works similar to ngInclude, however, instead of downloading template code (or loading it
from the template cache), ngSwitch
simply choses 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 $scope.someVal
.
This directive can be used as custom element, but be aware of IE restrictions.
<ANY ng-switch="expression">
<ANY ng-switch-when="matchValue1">...</ANY>
<ANY ng-switch-when="matchValue2">...</ANY>
<ANY ng-switch-default>...</ANY>
</ANY>
Param | Type | Details |
---|---|---|
ngSwitch|on | * | expression to match against ng-switch-when. |