Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at TechCrunch Disrupt (New York, NY) with: Danielle Morrill
Ben Nadel at TechCrunch Disrupt (New York, NY) with: Danielle Morrill@DanielleMORRILL )

Binding Multiple ngSwitchWhen Cases To The Same Value In AngularJS

By Ben Nadel on

Earlier this morning, when I was looking into the priority changes for ngSwitchWhen in AngularJS 1.3, I noticed something odd - the ngSwitchWhen directive was "pushing" its transclusion function onto an array. In AngualrJS 1.0.8, this operation was a straight assignment. It seems that as of AngularJS 1.2, you can now have multiple ngSwitchWhen cases bound to the same value in the context of a single ngSwitch directive.


 
 
 

 
 
 
 
 

Run this demo in my JavaScript Demos project on GitHub.

I can't really think of a use-case for this feature off the top of my head. But, since it exists, I figured I'd give it a quick try in case something occurs to me later. In the following demo, I have an ngSwitch directive that contains 6 ngSwitchWhen bindings. Three of these cases are bound to "true" and 3 of them are bound to "false."

  • <!doctype html>
  • <html ng-app="Demo">
  • <head>
  • <meta charset="utf-8" />
  •  
  • <title>
  • Binding Multiple ngSwitchWhen Cases To The Same Value In AngularJS
  • </title>
  •  
  • <link rel="stylesheet" type="text/css" href="./demo.css"></link>
  • </head>
  • <body ng-controller="AppController">
  •  
  • <h1>
  • Binding Multiple ngSwitchWhen Cases To The Same Value In AngularJS
  • </h1>
  •  
  • <!--
  • Notice that we have multiple ngSwitchWhen "case" statements that all bind to
  • the same value in the ngSwitch directive.
  • -->
  • <ul ng-switch="showingEven">
  • <li ng-switch-when="false">
  • 1 <em>is odd</em>
  • </li>
  • <li ng-switch-when="true">
  • 2 <em>is even</em>
  • </li>
  • <li ng-switch-when="false">
  • 3 <em>is odd</em>
  • </li>
  • <li ng-switch-when="true">
  • 4 <em>is even</em>
  • </li>
  • <li ng-switch-when="false">
  • 5 <em>is odd</em>
  • </li>
  • <li ng-switch-when="true">
  • 6 <em>is even</em>
  • </li>
  • </ul>
  •  
  • <p>
  • <a ng-click="toggleEvenOdd()">Toggle Even / Odd</a>
  • </p>
  •  
  •  
  • <!-- Load scripts. -->
  • <script type="text/javascript" src="../../vendor/angularjs/angular-1.3.8.min.js"></script>
  • <script type="text/javascript">
  •  
  • // Create an application module for our demo.
  • var app = angular.module( "Demo", [] );
  •  
  •  
  • // -------------------------------------------------- //
  • // -------------------------------------------------- //
  •  
  •  
  • // I control the root of the application.
  • app.controller(
  • "AppController",
  • function( $scope ) {
  •  
  • // I determine if we're showing the even elements (or the odd by omission).
  • $scope.showingEven = false;
  •  
  •  
  • // ---
  • // PUBLIC METHODS.
  • // ---
  •  
  •  
  • // I toggle between showing odd and show even items.
  • $scope.toggleEvenOdd = function() {
  •  
  • $scope.showingEven = ! $scope.showingEven;
  •  
  • };
  •  
  • }
  • );
  •  
  • </script>
  •  
  • </body>
  • </html>

When the page first loads, we are set to show the odd values. And, as such, all three ngSwitchWhen cases that were bound to "false" are visible:


 
 
 

 
 Binding multiple ngSwitchWhen directives to the same value in the context of a single ngSwitch directive. 
 
 
 

As you can see, all three ngSwitchWhen cases, bound to the same value, were all visible. This means that the ngSwitch directive cloned and linked each instance. Like I said, I am not sure what a good use-case for this is - if anyone is using this in production, I'd love to know what they're using it for.




Reader Comments

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.