reflect - angularjs: valores múltiples en un ng-switch-when

ng-switch-when multiple

Question

Tengo el siguiente ngSwitch:

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

Como puede ver, tengo el texto Wrong para dos opciones wrong y correct . He intentado (como puedes ver) usar la tubería | , pero eso no funciona. Alguna sugerencia ?

Answer 1

ng-switch con opción de selección puede ayudar

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

Answer 2

Esto es casi lo mismo con el uso de ng-if, pero la ventaja de esto es que puede usar ng-switch-when = "true" o predeterminado o falso varias veces dentro de 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>

En vivo: http://jsfiddle.net/8yf15t2d/

Answer 3

Esto no se puede lograr con las directivas de base de angular, pero si lo desea, podría escribir su propia directiva para implementar esto, y ya podría interactuar con la directiva ngSwitch existente.

ngSwitchController tiene un cases propiedad que es un mapa. ¡Cada tecla de mayúsculas y minúsculas tiene un prefijo con ! y el caso predeterminado es igual a ? . Cada valor de caso es un objeto con dos propiedades: transclude y element .
Advertencia : A diferencia de ngModelController , ngSwitchController no está publicado API, por lo que está sujeto a cambios.

Basado en el ngSwitchWhenDirective original, podemos construir un multiconmutadorWhen, que funcionará con todas las directivas ngSwitch, ngSwitchWhen y ngSwitchDefault existentes sin conflicto.

.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);
            });
        }
    }
});

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

Answer 4

No puede tener múltiples condiciones con un solo ng-switch-when .

Una alternativa es usar un ng-if , pero en el caso de manejo de errores, prefiero llenar una variable de error en el alcance en el controlador, y usar ng-show=error .

Answer 5

Para angular> = v1.5.10,

Puedes hacerlo agregando ng-switch-when-separator="|" ng-when nodo. ver ejemplo en la documentación.

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

ver la discusión aquí https://github.com/angular/angular.js/issues/3410 Nota: según mi experiencia, no funciona con números ... ¿todavía?

Answer 6

Puede agregar otra caja de interruptor.

Ejemplo:

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

Ejemplo en vivo: http://jsfiddle.net/choroshin/Zt2qE/2/

Answer 7

Puede agregar un filtro al status que mapea valores que significan lo mismo en el mismo valor.

.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;
    };
  })

Entonces simplemente

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

Aunque en su caso, es posible que haya querido imprimir un mensaje para poder extraer el mensaje de un diccionario ...

Algo como:

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