ngSwitch

http://docs.angularjs.org/api/ng.directive:ngSwitch

概要
使用方法
サンプル

概要

ngSwitchディレクティブは、テンプレートのscope式を元にDOM構造を条件によって取り替える場合に使用されます。 ngSwitchWhenでも、ngSwitchDefaultでも無く、 ngSwitchの要素がテンプレート内の指定された場所に配置されます。

ディレクティブ自体の動作はngIncludeに似ていますが、テンプレートのコードをダウンロードする(または、そのキャッシュの読み込み)代わりに、 ngSwitchは単純に入れ子にしている要素の1つを選択し、式の評価から得られる値と一致する要素を表示します。言い方を変えると、コンテナ要素を定義(ディレクティブ指定した要素)し、 on="..."属性(または、ng-switch="..."属性)に式を設定し、このディレクティブ要素内にwhen属性付きの各要素を定義します。 when属性は、式の評価によって表示する要素をngSwitchに知らせるために使用されます。もし、when属性から式に一致するものが見つからない場合は、default属性の要素が表示されます。

使用方法

このディレクティブは、カスタム要素として使用することができますが、IEの制限に注意してください。

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

ディレクティブ情報

このディレクティブは新しいスコープを作成します。

アニメーション

enter: ngSwitchの内容が変更され、一致した子要素がコンテナ内に配置された後に発生します。
leave: ngSwitchの内容が変更され、直前の内容がDOMから削除される直前に発生します。

アニメーションに関する手順の詳細については、$animateを確認してみてください。

パラメーター

パラメーター	説明
ngSwitch \| on	`ng-switch-when`に対して、一致させたい式を指定します。

<!doctype html>
<html ng-app="ngAnimate">
  <head>
    <link rel="stylesheet" type="text/css" href="animation.css">
    <script src="http://code.angularjs.org/1.2.4/angular.min.js"></script>
    <script src="http://code.angularjs.org/1.2.4/angular-animate.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="Ctrl">
      <select ng-model="selection" ng-options="item for item in items">
      </select>
      <tt>selection={{selection}}</tt>
      <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>
  </body>
</html>

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

.animate-switch {
  padding:10px;
}

.animate-switch.ng-animate {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  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;
}

function Ctrl($scope) {
  $scope.items = ['settings', 'home', 'other'];
  $scope.selection = $scope.items[0];
}

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 default', function() {
  select('selection').option('other');
  expect(element('.doc-example-live [ng-switch]').text()).toMatch(/default/);
});

<!doctype html>
<html ng-app="ngAnimate">
  <head>
<style type="text/css">.animate-switch-container {
  position:relative;
  background:white;
  border:1px solid black;
  height:40px;
  overflow:hidden;
}

.animate-switch {
  padding:10px;
}

.animate-switch.ng-animate {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  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;
}
</style>
    <script src="http://code.angularjs.org/1.2.4/angular.min.js"></script>
    <script src="http://code.angularjs.org/1.2.4/angular-animate.min.js"></script>
<script>function Ctrl($scope) {
  $scope.items = ['settings', 'home', 'other'];
  $scope.selection = $scope.items[0];
}
</script>
  </head>
  <body>
    <div ng-controller="Ctrl">
      <select ng-model="selection" ng-options="item for item in items">
      </select>
      <tt>selection={{selection}}</tt>
      <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>
  </body>
</html>

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。