How can I use ng-switch to satisfy multiple, same conditions?

Question

I want to create a piece of HTML with AngularJS based on the authentication status.

I use ng-switch.

The issue is that I want to have multiple hits on a single condition, but AngularJS only satifies the last condition met.

The HTML listens very close, because of Bootrap with fluent layout. The span3 and span9 must be directly below row-fluid container div, otherwise it will not float nicely. So I cannot introduce extra ng-switch divs to it...

<div class="row-fluid" ng-switch on="user.isAuthenticated">
<div class="span3" ng-switch-when="true"><div>
<div class="span9 spade-contentwrapper" ng-switch-when="true"><div>
<div class="spade-contentwrapper" ng-switch-when="false"><div>
<div>

See my simplified fiddle.

score 3 · Accepted Answer · answered Jul 23 '13 at 09:11

3

Angular 1.1.5 supports ng-if. You can look at that. Then you can have independent conditions.

answered Jul 23 '13 at 09:11

Chandermani

42,589
12
85
88

Unfortunately 1.1.5 is an unstable version. Is it possible to have a workaround that works in 1.0.7 stable ? – Patrick Peters Jul 23 '13 at 09:21
ng-if was taken from angularui i believe. You have the source code for 1.1.5. Pull it out as source code if it does not have any dependency. – Chandermani Jul 23 '13 at 09:28
1

I fixed it with ng-show instead of ng-if or ui-if, and it works. When AngularJS 1.1.5 becomes stable (or promoted to stable), I'll replace the ng-show with the ng-if statements so DOM will not be poluted. Thx. – Patrick Peters Jul 23 '13 at 09:48
An example would be great. – kravits88 Oct 07 '15 at 22:29

score 1 · Answer 2 · answered Oct 02 '13 at 21:01

Someone overwrote the ngSwitchWhen Directive to include the option to allow || operators, you can find the original response here: http://docs.angularjs.org/api/ng.directive:ngSwitch by angabriel

config(function($routeProvider, $provide) {
/**
* overwrite angular's directive ngSwitchWhen
* can handle ng-switch-when="value1 || value2 || value3"
*/
    $provide.decorator('ngSwitchWhenDirective', function($delegate) {
    $delegate[0].compile = function(element, attrs, transclude) {
        return function(scope, element, attr, ctrl) {
          var subCases = [attrs.ngSwitchWhen];
          if(attrs.ngSwitchWhen && attrs.ngSwitchWhen.length > 0 && attrs.ngSwitchWhen.indexOf('||') != -1) {
          subCases = attrs.ngSwitchWhen.split('||');
        }
        var i=0;
        var casee;
        var len = subCases.length;
        while(i<len) {
            casee = $.trim(subCases[i++]);
            ctrl.cases['!' + casee] = (ctrl.cases['!' + casee] || []);
            ctrl.cases['!' + casee].push({ transclude: transclude, element: element });
        }
    }
    }
    return $delegate;
  });
});

Thank you [Ty Danielson](http://stackoverflow.com/users/2661425/ty-danielson) for posting the solution i found a few weeks ago. I'm glad when it helps others. Turns out it still works nicely with latest 1.2.0-rc.3. By the way: the inject of the $routeProvider is actually not needed, but i guess every angular app relies on it, so its more clear where this code has to go. — angabriel, Nov 06 '13 at 12:52

score 0 · Answer 3 · answered Jul 23 '13 at 09:37

0

Unfortunately the ng-switch directive only supports multiple matches since version 1.1.3 of AngularJS.

See the changelog and this commit as reference.

answered Jul 23 '13 at 09:37

DanEEStar

6,140
6
37
52

How can I use ng-switch to satisfy multiple, same conditions?

3 Answers3

Linked