<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
This Pen doesn't use any external CSS resources.