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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div ng-app='switchDemo'>
  <header>
    <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>
    
    
  </header>
  <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>
    </div>

    <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>
      </div>
    </div>

    <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>-->
    </div>
    
  </div>
</div>

            
          
!
            
              /* 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;
    }
  });

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console