angular.module.ng.$compileProvider.directive.ngSwitch

Description

Conditionally change the DOM structure.

Usage

as element (see IE restrictions)
<ng-switch
       on="{*}">
</ng-switch>
as attribute
<ANY ng-switch="{*}">
   ...
</ANY>

Directive info

  • This directive creates new scope.

Parameters

Example

  <script>
    function Ctrl($scope) {
      $scope.items = ['settings', 'home', 'other'];
      $scope.selection = $scope.items[0];
    }
  </script>
  <div ng-controller="Ctrl">
    <select ng-model="selection" ng-options="item for item in items">
    </select>
    <tt>selection={{selection}}</tt>
    <hr/>
    <div ng-switch on="selection" >
      <div ng-switch-when="settings">Settings Div</div>
      <span ng-switch-when="home">Home Span</span>
      <span ng-switch-default>default</span>
    </div>
  </div>
  it('should start in settings', function() {
   expect(element('.doc-example-live [ng-switch]').text()).toMatch(/Settings Div/);
  });
  it('should change to home', function() {
   select('selection').option('home');
   expect(element('.doc-example-live [ng-switch]').text()).toMatch(/Home Span/);
  });
  it('should select deafault', function() {
   select('selection').option('other');
   expect(element('.doc-example-live [ng-switch]').text()).toMatch(/default/);
  });