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 :)

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.

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>

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>

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>

Answer 5

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