<h1>Example: ngSwitch</h1>
<p>ngSwitchはswitch文と同様の役割を果たしテンプレートをケース分けすることができます。</p>
<div ng-app>
  <ul>
    <li>
      <input type="radio" id="Morning" ng-model="greeting" value="morning">
      <label for="Morning">朝</label>
    </li>
    <li>
      <input type="radio" id="Afternoon" ng-model="greeting" value="afternoon">
      <label for="Afternoon">昼</label>
    </li>
    <li>
      <input type="radio" id="Evening" ng-model="greeting" value="evening">
      <label for="Evening">晩</label>
    </li>
  </ul>
  
  <div ng-switch="greeting">
    <div ng-switch-when="morning">おはよう。</div>
    <div ng-switch-when="afternoon">こんにちは。</div>
    <div ng-switch-when="evening">こんばんは。</div>
    <div ng-switch-default>選択してください。</div>
  </div>
  
  
</div>
@import "bourbon";

body {
  padding: 1.5rem;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js