AngularJS: ng-switch-when with an OR

Question

Is it possible to have an OR in ng-switch-when?

<div ng-repeat="w in windows" ng-show="visibleWindowId == w.id" ng-switch="w.type">
    <div ng-switch-when="val1 **OR** val2">
        sup
    </div>
</div>

If not, how could the above be accomplished?

Thanks :)

Everyplace

did you try || ? val1||val2 , i guess it should work. – Brei

Needs an override , here's the detailed method : #17806136 – Ro

Answer 1

ngswitch only allows you to compare a single condition.

I you are looking to test multiple conditions you can use ng-if available with version 1.1.5

Reference

It is important to note that using ng-if and ng-switch remove the element from the DOM structure, opposed to show and hide.

This is important when you traverse the DOM to find elements.

Cuda

Correct answer. But .. "This is important when you traverse the DOM to find elements." - Strange, I don't think I ever do this with Angular, after all, its not the angular way. – Procephalic

@Procephalic I really don't either (that is really the selling point of angular isn't it?). But there is a chance someone might create a directive and need that functionality and I would rather people know and have an understanding of what they are implementing. – Cuda

It's relevant when using CSS selectors like +, :first-child, :empty etc. – Yawn

Answer 2

This is now possible using ng-switch-when-separator which was added to Angular documentation in 1.5.10:

<div ng-repeat="w in windows" ng-show="visibleWindowId == w.id" ng-switch="w.type">
    <div ng-switch-when="val1|val2" ng-switch-when-separator="|">
        sup
    </div>
</div>

Echeverria

Answer 3

This will work too

<div ng-repeat="w in windows" ng-switch="w.type == 'val1' || w.type == 'val2'">
  <div ng-switch-when="true">
    sup
  </div>
</div>

Barometry

Seems like an ngIf is more suitable here. – Dyslexia

Answer 4

I created a simple directive in place of ngSwitchWhen that allows you to specify multiple cases for a single tag. It also allows you to specify dynamic values instead of purely static values.

One caveat, it only evaluates the expression once upon compile time, so you must return the correct value immediately. For my purposes this was fine as I was wanting to use constants defined elsewhere in the application. It could probably be modified to dynamically re-evaluate the expressions but that would require more testing with ngSwitch.

I am use angular 1.3.15 but I ran a quick test with angular 1.4.7 and it worked fine there as well.

Plunker Demo

The Code

module.directive('jjSwitchWhen', function() {
    // Exact same definition as ngSwitchWhen except for the link fn
    return {
        // Same as ngSwitchWhen
        priority: 1200,
        transclude: 'element',
        require: '^ngSwitch',
        link: function(scope, element, attrs, ctrl, $transclude) {
            var caseStms = scope.$eval(attrs.jjSwitchWhen);
            caseStms = angular.isArray(caseStms) ? caseStms : [caseStms];

            angular.forEach(caseStms, function(caseStm) {
                caseStm = '!' + caseStm;
                ctrl.cases[caseStm] = ctrl.cases[caseStm] || [];
                ctrl.cases[caseStm].push({ transclude: $transclude, element: element });
            });
        }
    };
});

Usage

Controller

  $scope.types = {
      audio: '.mp3', 
      video: ['.mp4', '.gif'],
      image: ['.jpg', '.png', '.gif'] // Can have multiple matching cases (.gif)
  };

Template

  <div ng-switch="mediaType">
    <div jj-switch-when="types.audio">Audio</div>

    <div jj-switch-when="types.video">Video</div>

    <div jj-switch-when="types.image">Image</div>

    <!-- Even works with ngSwitchWhen -->
    <div ng-switch-when=".docx">Document</div>

    <div ng-switch-default>Invalid Type</div>
  <div>

Wotan

Very nice, i called it ng-switch-multiple-when – Gaylordgaylussac

Answer 5

You could use ng-class so that you can use or operator in your expression. Also, angular-ui has if directive.

Lanie