Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource


Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.


                <div ng-app='switchDemo'>
    <h1>Demo: Angular (1.20-rc3) Directives for Showing/Hiding content</h1>
    <!--<p>testing expressions: {{22/7 | number:4}}</p>-->    
    <p class="intro-text">This CodePen is designed to show a critical and non-documented distinction between several of Angular's directives. On the surface, ng-show/ng-hide, ng-switch and the new ng-if all  produce exactly the same results (partials/DOM-fragments that appear and disappear), but via different syntax and in response to different kinds of values.</p>
    <p class="intro-text">But that's where the similarities end. They go about this business in fundamentally different ways: ng-show/ng-hide simply toggle the visibility of an element or DOM fragment, while ng-switch and ng-If actually detach and reattach the elements/fragments/templates from the DOM.</p>
    <p class="intro-text">This has significant implications for performance, for CSS selectors, and other considerations.</p>
    <p class="intro-text">Understand the differences by playing with the examples below. Use your browser's inspector to view the elements in the shaded areas. Use the buttons to toggle the content within the areas and observe how the different directives handle the content differently.  </p>
  <div class="container" ng-controller="demoCtrl">
    <h3>ng-Show demo area</h3>
    <p class="intro-text">When you toggle through the values on a ng-show/ng-hide, Angular leaves these inline templates in the DOM, and simply toggles their `display` property, to pull them out of the page flow.</p>
    <div class="highlight">
      <button class="btn btn-primary" ng-click="showStatus=!showStatus">Toggle Content</button>
      <p ng-show="showStatus" class="bs-callout bs-callout-danger">True: I'm here all the time!</p>
      <p ng-hide="showStatus" class="bs-callout bs-callout-warning">False: I'm also here all the time!</p>

    <h3>ng-Switch demo area</h3>
    <p class="intro-text">When you toggle through the values on an ng-switch, Angular actually detaches these inline templates from the DOM, then reattaches them later if needed.</p>
    <div class="highlight">
    <button class="btn btn-primary" ng-click="increment()">Toggle Content</button>
      <div ng-switch="switchStatus">
        <p ng-switch-when="0" class="bs-callout bs-callout-danger">0: Now you see me...</p>
        <p ng-switch-when="1" class="bs-callout bs-callout-warning">1: Now you don't!</p>
        <p ng-switch-when="2" class="bs-callout bs-callout-info">2: Ignore those other two imposters.</p>
        <p ng-switch-default>Default: This is a mistake if you see me!</p>
        <p><em>(This paragraph here will always be present, as it's not conditional. This allows us to interleave conditional and non-conditional content in the template. Note that Angular 1.0.8 used to append() ng-switch'ed content to the end of the container, but Angular 1.2 leaves ng-switch'ed content in it's original position. Compare to <a href="">this Plunker based on 1.0.8</a>.)</em></p>

    <h3>ng-If demo area</h3>
    <p class="intro-text">Now, let's compare ngIf to the other two. On the surface, ngIf looks just like ngShow, in that it reacts to a boolean (or rather, a falsy/truthy value). But observe how the behavior of the DOM elements is actually much more like ngSwitch...</p>

    <div class="highlight">
      <button class="btn btn-primary" ng-click="ifValue=!ifValue">Toggle Content</button>
      <p class="bs-callout bs-callout-info" ng-if="showIf()">True: I'll disappear from the DOM if you click that button.</p>
<!--      <p><em>Un-comment me to see that I stay put between these ng-if's.</em></p>-->
      <p class="bs-callout bs-callout-warning" ng-if="hideIf()">False: So will I. </p>
<!--      <p><em>Un-comment me too: I stay put as well.</em></p>-->



                /* Styles go here */
header {
  padding: 20px 40px;

.highlight {
display: block;
padding: 9px 14px;
margin-bottom: 14px;
background-color: #f7f7f9;
border: 1px solid #e1e1e8;
border-radius: 4px;

.btn-primary {
  margin-bottom: 20px;
.intro-text {
  font-size: 14px;
  color: #999;
.demo-text {
  display: block;
  background: green;
  color: white;
  font-weight: bold;
  padding: 10px;
 * Callouts
 * Not quite alerts, but custom and helpful notes for folks reading the docs.
 * Requires a base and modifier class.

/* Common styles for all types */
.bs-callout {
  margin: 20px 0;
  padding: 20px;
  border-left: 3px solid #eee;
.bs-callout h4 {
  margin-top: 0;
  margin-bottom: 5px;
.bs-callout p:last-child {
  margin-bottom: 0;

/* Variations */
.bs-callout-danger {
  background-color: #fac3c3;
  border-color: #e35268;
.bs-callout-danger h4 {
  color: #b94a48;
.bs-callout-warning {
  background-color: #fff1b8;
  border-color: #fab937;
.bs-callout-warning h4 {
  color: #c09853;
.bs-callout-info {
  background-color: #c2ebff;
  border-color: #2b8799;
.bs-callout-info h4 {
  color: #3a87ad;



                angular.module('switchDemo', [])
.controller('demoCtrl', function($scope) {
    $scope.showStatus = true;
    $scope.switchStatus = 0;
    $scope.ifValue = true;
    $scope.showIf = function() {
      return $scope.ifValue;
    $scope.hideIf = function() {
      return !$scope.ifValue;
    $scope.increment = function() {
      $scope.switchStatus = ($scope.switchStatus === 0) ? 1 : 0;