web-dev-qa-db-fra.com

angularjs: plusieurs valeurs dans un ng-switch-when

J'ai le ngSwitch suivant:

<p ng-switch="status">
    <span ng-switch-when="wrong|incorrect">
       Wrong
    </span>
    <span ng-switch-default>
       Correct
    </span>
</p>

Comme vous pouvez le constater, j'ai le texte Wrong pour deux options wrong et correct. Comme vous pouvez le constater, j’ai essayé d’utiliser le tube |, mais cela ne fonctionne pas. Aucune suggestion ?

angularjsng-switch
54
Jeanluca Scaljeri

Pour angulaire> = v1.5.10, 

Vous pouvez le faire en ajoutant ng-switch-when-separator="|" au nœud ng-when. voir exemple dans la documentation. 

<span ng-switch-when="wrong|incorrect" ng-switch-when-separator="|">

voir la discussion ici https://github.com/angular/angular.js/issues/3410 Remarquez, d'après mon expérience, cela ne fonctionne pas avec les chiffres ... pour le moment? 

58
Chauskin Rodion

C'est presque la même chose que d'utiliser un ng-if, mais l'avantage est que vous pouvez utiliser ng-switch-when = "true" ou plusieurs fois par défaut ou faux dans ng-switch principal.

<p ng-switch on="(status == 'wrong') || (status == 'incorrect')">
    <span ng-switch-when="true">
        Wrong
    </span>
    <span ng-switch-default>
       Correct
    </span>
</p>

Live: http://jsfiddle.net/8yf15t2d/

38
Salahi Halil Altıncı

Vous ne pouvez pas avoir plusieurs conditions avec un seul ng-switch-when.

Une alternative consiste à utiliser un ng-if, mais dans le cas du traitement des erreurs, je préfère renseigner une variable d'erreur sur l'étendue du contrôleur et utiliser ng-show=error.

20
Ed Hinchliffe

Vous pouvez ajouter un filtre à la status qui mappe les valeurs qui signifient la même chose dans la même valeur.

.filter('meaning', function() {
    return function(input) {
      input = input || '';
      if (['wrong', 'amiss','awry', 'bad', 'erroneous', 'false', 'inaccurate',\
           'misguided', 'mistaken', 'unsound', 'incorrect'].indexOf(input) != -1)
          return 'wrong';
      // You can make it generic like this:
      synonymsDictionary = {
        'someWord' : ['syn1', 'syn2', 'syn3' ... ],
        'someOtherWord' : ['otherWordSyn1', 'otherWordSyn2', 'otherWordSyn3' ...]
        .
        .
        .
      };

      for (var Word in synonymsDictionary)
          if (synonymsDictionary[Word].indexOf(input) != -1)
              return Word; // This way you could iterate over a bunch of arrays...

         // Edge case
         else return input;
    };
  })

Alors vous simplement

<p ng-switch="status|meaning">
    <span ng-switch-when="wrong">
       Wrong
    </span>
    <span ng-switch-default>
       Correct
    </span>
</p>

Bien que dans votre cas, vous souhaitiez peut-être simplement imprimer un message afin de pouvoir extraire le message d'un dictionnaire ...

Quelque chose comme:

<span ng-if="status">
    {{getStatusMessage(status)}}
</span>
15
wolfdawn

Cela ne peut pas être réalisé avec les directives de base d'angular, mais si vous le souhaitez, vous pouvez écrire votre propre directive pour l'implémenter, et vous pouvez déjà vous connecter à la directive ngSwitch existante.

ngSwitchController a une propriété cases qui est une carte. Le préfixe ! est attribué à chaque clé de cas et le cas par défaut est égal à ?. Chaque valeur de cas est un objet avec deux propriétés: transclude et element.
Warning: Contrairement à ngModelController , ngSwitchController est une API publiée non, elle est donc susceptible de changer.

Basé sur le ngSwitchWhenDirective d'origine, nous pouvons construire un multiswitchWhen qui fonctionnera sans conflit avec toutes les directives ngSwitch, ngSwitchWhen et ngSwitchDefault existantes.

.directive('multiswitchWhen', function () {
    return {
        transclude: 'element',
        priority: 800,
        require: '^ngSwitch',
        link: function(scope, element, attrs, ctrl, $transclude) {
            var selectTransclude = { transclude: $transclude, element: element };
            angular.forEach(attrs.multiswitchWhen.split('|'), function(switchWhen) {
                ctrl.cases['!' + switchWhen] = (ctrl.cases['!' + switchWhen] || []);
                ctrl.cases['!' + switchWhen].Push(selectTransclude);
            });
        }
    }
});

Exemple plunker: http://plnkr.co/edit/K9znnnFiVnKAgGccSlrQ?p=preview

5
Jonathan Gawrych

Vous pouvez ajouter un autre boîtier de commutateur.

Exemple:

<p ng-switch="status">
    <span ng-switch-when="wrong">
       Wrong
    </span>
<span ng-switch-when="incorrect">
       Wrong
    </span>
    <span ng-switch-default>
       Correct
    </span>
</p>

Exemple live: http://jsfiddle.net/choroshin/Zt2qE/2/

2
Alex Choroshin

ng-switch avec sélection des options peut aider

<select ng-model="myVar">
  <option value="option1">Option 1
  <option value="option2">Option 2
  <option value="option3">Option 3
</select>
<div ng-switch="myVar">
  <div ng-switch-when="option1">
     <p>Option 1 is selected .</p>
  </div>
  <div ng-switch-when="option1">
     <p>Option 2 is selected</p>
  </div>
  <div ng-switch-default>
     <p>Option 3 is selected </p>
  </div>
</div>
0
mukesh mali