NG-SWITCH + DDL

NG-SWITCH + DDL

by Andrew Pougher

HTML

<script src="https://code.angularjs.org/1.2.9/angular-animate.js"></script>
 <div ng-app>
<form>
  Select a topic:
  <select ng-model="myVar">
    <option value=""> Choose
    <option value="dental">Dental
    <option value="oral">Oral
    <option value="pharma">Pharma
  </select>
</form>

<div ng-switch="myVar" class="message">
  <div ng-switch-when="dental">
     <h1>DENTAL</h1>
     <p>Welcome teeth, its fangtastic</p>
  </div>
  <div ng-switch-when="oral" class="message">
     <h1>ORAL</h1>
     <p>Spit or swallow?</p>
  </div>
  <div ng-switch-when="pharma" class="message">
     <h1>Pharma</h1>
     <p>Just say No, or Yes.</p>
  </div>
</div>

<p>The ng-switch directive hides and shows HTML sections</p>
</div>

<script>
	/* http://bit.ly/ARP71 */
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-4809804-1', 'auto');
  ga('send', 'pageview');
</script>

CSS

.message.ng-enter {
  opacity: 0;
  -webkit-transition:all linear 1s;
  -moz-transition:all linear 1s;
  -o-transition:all linear 1s;
  transition: opacity 1s;
}

.message.ng-enter.ng-enter-active {
  opacity: 1.0;
}

JavaScript

angular.module('animate', ["ngAnimate"]);