Binding Multiple ngSwitchWhen Cases To The Same Value In AngularJS
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:
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.
Want to use code from this post? Check out the license.
Reader Comments