36

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

Pavel
  • 5,320
  • 8
  • 35
  • 45
  • 1
    did you try || ? val1||val2 , i guess it should work. – mpm Jan 24 '13 at 02:55
  • Needs an override , here's the detailed method : http://stackoverflow.com/questions/17805636/how-can-i-use-ng-switch-to-satisfy-multiple-same-conditions/19146745#19146745 – arkoak Aug 01 '14 at 06:29

5 Answers5

19

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.

Community
  • 1
  • 1
Malkus
  • 3,686
  • 2
  • 24
  • 39
  • 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. – Blowsie Jul 03 '15 at 07:51
  • @Blowsie 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. – Malkus Jul 03 '15 at 11:08
  • 2
    It's relevant when using CSS selectors like `+`, `:first-child`, `:empty` etc. – Tamlyn Aug 03 '15 at 15:06
16

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>
searlea
  • 8,173
  • 4
  • 34
  • 37
8

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>
Luís Deschamps Rudge
  • 1,106
  • 1
  • 10
  • 12
5

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>
Joel Jeske
  • 1,618
  • 14
  • 17
2

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

Tosh
  • 35,955
  • 11
  • 65
  • 55