web-dev-qa-db-fra.com

AngularJS: ng-switch-when avec un OR

Est-il possible d'avoir un OR dans 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>

Sinon, comment pourrait-on accomplir ce qui précède?

Merci :)

angularjsng-switch
32
Pavel

ngswitch ne vous permet de comparer qu'une seule condition.

Si vous cherchez à tester plusieurs conditions, vous pouvez utiliser ng-if disponible avec version 1.1.5

Référence

Il est important de noter que l'utilisation de ng-if et ng-switchsupprimer l'élément du DOM structure, opposé à afficher et masquer.

Ceci est important lorsque vous parcourez le DOM pour trouver des éléments.

17
Malkus

C'est désormais possible en utilisant ng-switch-when-separator qui a été ajouté à 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>
14
searlea

Cela fonctionnera aussi

<div ng-repeat="w in windows" ng-switch="w.type == 'val1' || w.type == 'val2'">
  <div ng-switch-when="true">
    sup
  </div>
</div>
8
Luís Deschamps Rudge

J'ai créé une simple directive à la place de ngSwitchWhen qui vous permet de spécifier plusieurs cas pour une seule balise. Il vous permet également de spécifier des valeurs dynamiques au lieu de valeurs purement statiques.

Une mise en garde, il n'évalue l'expression qu'une seule fois au moment de la compilation, vous devez donc retourner immédiatement la valeur correcte. Pour mes besoins, c'était bien car je voulais utiliser des constantes définies ailleurs dans l'application. Il pourrait probablement être modifié pour réévaluer dynamiquement les expressions mais cela nécessiterait plus de tests avec ngSwitch.

J'utilise angular 1.3.15 mais j'ai effectué un test rapide avec angular 1.4.7 et cela a bien fonctionné là aussi).

Démo Plunker

Le 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

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

  <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>
5
Joel Jeske

Vous pouvez utiliser ng-class pour pouvoir utiliser l'opérateur or dans votre expression. De plus, angular-ui a la directive if.

2
Tosh