ngSwitch

- directive in module 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 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.

Be aware that the attribute values to match against cannot be expressions. They are interpreted as literal string values to match against. For example, ng-switch-when="someVal" will match against the string "someVal" not against the value of the expression $scope.someVal.

Directive Info

This directive creates new scope.
This directive executes at priority level 1200.

Usage

<ANY ng-switch="expression">
  <ANY ng-switch-when="matchValue1">...</ANY>
  <ANY ng-switch-when="matchValue2">...</ANY>
  <ANY ng-switch-default>...</ANY>
</ANY>

Animations

Animation	Occurs
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

Click here to learn more about the steps involved in the animation.

Arguments

Param Type Details

ngSwitch | on

Param	Type	Details
ngSwitch \| on	*	expression to match against `ng-switch-when`. On child elements add: `ngSwitchWhen`: the case statement to match against. If match then this case will be displayed. If the same match appears multiple times, all the elements will be displayed. `ngSwitchDefault`: the default case when no other case match. If there are multiple default cases, all of them will be displayed when no other case match.

expression to match against ng-switch-when. On child elements add:

ngSwitchWhen: the case statement to match against. If match then this case will be displayed. If the same match appears multiple times, all the elements will be displayed.
ngSwitchDefault: the default case when no other case match. If there are multiple default cases, all of them will be displayed when no other case match.

Example

<div ng-controller="ExampleController">
  <select ng-model="selection" ng-options="item for item in items">
  </select>
  <code>selection={{selection}}</code>
  <hr/>
  <div class="animate-switch-container"
    ng-switch on="selection">
      <div class="animate-switch" ng-switch-when="settings">Settings Div</div>
      <div class="animate-switch" ng-switch-when="home">Home Span</div>
      <div class="animate-switch" ng-switch-default>default</div>
  </div>
</div>

angular.module('switchExample', ['ngAnimate'])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.items = ['settings', 'home', 'other'];
  $scope.selection = $scope.items[0];
}]);

.animate-switch-container {
  position:relative;
  background:white;
  border:1px solid black;
  height:40px;
  overflow:hidden;
}

.animate-switch {
  padding:10px;
}

.animate-switch.ng-animate {
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;

  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.animate-switch.ng-leave.ng-leave-active,
.animate-switch.ng-enter {
  top:-50px;
}
.animate-switch.ng-leave,
.animate-switch.ng-enter.ng-enter-active {
  top:0;
}

var switchElem = element(by.css('[ng-switch]'));
var select = element(by.model('selection'));

it('should start in settings', function() {
  expect(switchElem.getText()).toMatch(/Settings Div/);
});
it('should change to home', function() {
  select.all(by.css('option')).get(1).click();
  expect(switchElem.getText()).toMatch(/Home Span/);
});
it('should select default', function() {
  select.all(by.css('option')).get(2).click();
  expect(switchElem.getText()).toMatch(/default/);
});

Load online demo