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>