feat(ng:switch): Preserve the order of the elements not in the ng-switch

Preserve the order of the elements that are not part of a case nor default in a ng-switch directive Closes angular#1074
lgalfaso · Mar 9, 2013 · eb357c6 · eb357c6
1 parent 7eafbb9
commit eb357c6
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 5 deletions.
diff --git a/src/ng/directive/ngSwitch.js b/src/ng/directive/ngSwitch.js
@@ -6,13 +6,16 @@
  * @restrict EA
  *
  * @description
- * Conditionally change the DOM structure.
+ * Conditionally change the DOM structure. Elements within ngSwitch but without
+ * ngSwitchWhen or ngSwitchDefault directives will be preserved at the location
+ * as specified in the template
  *
  * @usageContent
  * <ANY ng-switch-when="matchValue1">...</ANY>
  *   <ANY ng-switch-when="matchValue2">...</ANY>
  *   ...
  *   <ANY ng-switch-default>...</ANY>
+ *   <ANY>...</ANY>
  *
  * @scope
  * @param {*} ngSwitch|on expression to match against <tt>ng-switch-when</tt>.
@@ -26,6 +29,7 @@
  *   are multiple default cases, all of them will be displayed when no other
  *   case match.
  *
+ *
  * @example
     <doc:example>
       <doc:source>
@@ -90,9 +94,9 @@ var ngSwitchDirective = valueFn({
         forEach(selectedTranscludes, function(selectedTransclude) {
           var selectedScope = scope.$new();
           selectedScopes.push(selectedScope);
-          selectedTransclude(selectedScope, function(caseElement) {
+          selectedTransclude.transclude(selectedScope, function(caseElement) {
             selectedElements.push(caseElement);
-            element.append(caseElement);
+            selectedTransclude.element.after(caseElement);
           });
         });
       }
@@ -107,7 +111,7 @@ var ngSwitchWhenDirective = ngDirective({
   compile: function(element, attrs, transclude) {
     return function(scope, element, attr, ctrl) {
       ctrl.cases['!' + attrs.ngSwitchWhen] = (ctrl.cases['!' + attrs.ngSwitchWhen] || []);
-      ctrl.cases['!' + attrs.ngSwitchWhen].push(transclude);
+      ctrl.cases['!' + attrs.ngSwitchWhen].push({ transclude: transclude, element: element });
     };
   }
 });
@@ -119,7 +123,7 @@ var ngSwitchDefaultDirective = ngDirective({
   compile: function(element, attrs, transclude) {
     return function(scope, element, attr, ctrl) {
       ctrl.cases['?'] = (ctrl.cases['?'] || []);
-      ctrl.cases['?'].push(transclude);
+      ctrl.cases['?'].push({ transclude: transclude, element: element });
     };
   }
 });
diff --git a/test/ng/directive/ngSwitchSpec.js b/test/ng/directive/ngSwitchSpec.js
@@ -95,6 +95,61 @@ describe('ngSwitch', function() {
   }));
 
 
+  it('should display the elements that do not match a switch', inject(function($rootScope, $compile) {
+    element = $compile(
+      '<ul ng-switch="select">' +
+        '<li>always </li>' +
+        '<li ng-switch-when="1">one </li>' +
+        '<li ng-switch-when="2">two </li>' +
+        '<li ng-switch-default>other, </li>' +
+        '<li ng-switch-default>other too </li>' +
+      '</ul>')($rootScope);
+    $rootScope.$apply();
+    expect(element.text()).toEqual('always other, other too ');
+    $rootScope.select = 1;
+    $rootScope.$apply();
+    expect(element.text()).toEqual('always one ');
+  }));
+
+
+  it('should display the elements that do not have ngSwitchWhen nor ngSwitchDefault at the position specified in the template, when the first and last elements in the ngSwitch body do not have a ngSwitch* directive', inject(function($rootScope, $compile) {
+    element = $compile(
+      '<ul ng-switch="select">' +
+        '<li>1</li>' +
+        '<li ng-switch-when="1">2</li>' +
+        '<li>3</li>' +
+        '<li ng-switch-when="2">4</li>' +
+        '<li ng-switch-default>5</li>' +
+        '<li>6</li>' +
+        '<li ng-switch-default>7</li>' +
+        '<li>8</li>' +
+      '</ul>')($rootScope);
+    $rootScope.$apply();
+    expect(element.text()).toEqual('135678');
+    $rootScope.select = 1;
+    $rootScope.$apply();
+    expect(element.text()).toEqual('12368');
+  }));
+
+
+  it('should display the elements that do not have ngSwitchWhen nor ngSwitchDefault at the position specified in the template when the first and last elements in the ngSwitch have a ngSwitch* directive', inject(function($rootScope, $compile) {
+    element = $compile(
+      '<ul ng-switch="select">' +
+        '<li ng-switch-when="1">2</li>' +
+        '<li>3</li>' +
+        '<li ng-switch-when="2">4</li>' +
+        '<li ng-switch-default>5</li>' +
+        '<li>6</li>' +
+        '<li ng-switch-default>7</li>' +
+      '</ul>')($rootScope);
+    $rootScope.$apply();
+    expect(element.text()).toEqual('3567');
+    $rootScope.select = 1;
+    $rootScope.$apply();
+    expect(element.text()).toEqual('236');
+  }));
+
+
   it('should call change on switch', inject(function($rootScope, $compile) {
     element = $compile(
       '<ng:switch on="url" change="name=\'works\'">' +