angularjs - template - ng switch when angular 4

AngularJS: ng-switch-when con un OR

Question

¿Es posible tener un OR en 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>

Si no, ¿cómo podría lograrse lo anterior?

Gracias :)

Answer 1

Esto ahora es posible usando ng-switch-when-separator que se agregó a la documentación de Angular en 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>

Answer 2

Esto funcionara tambien

<div ng-repeat="w in windows" ng-switch="w.type == ''val1'' || w.type == ''val2''">
  <div ng-switch-when="true">
    sup
  </div>
</div>

Answer 3

Podría usar ng-class para que pueda usar or operador en su expresión. Además, angular-ui tiene directriz if .

Answer 4

ngSwitchWhen una directiva simple en lugar de ngSwitchWhen que le permite especificar varios casos para una sola etiqueta. También le permite especificar valores dinámicos en lugar de valores puramente estáticos.

Una advertencia, solo evalúa la expresión una vez en el tiempo de compilación, por lo que debe devolver el valor correcto inmediatamente. Para mis propósitos, esto estaba bien, ya que quería usar constantes definidas en otra parte de la aplicación. Probablemente podría modificarse para volver a evaluar dinámicamente las expresiones, pero eso requeriría más pruebas con ngSwitch .

Uso angular 1.3.15, pero realicé una prueba rápida con angular 1.4.7 y también funcionó bien allí.

Demo plunker

El código

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

Uso

Controlador

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

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

Answer 5

ngswitch solo le permite comparar una sola condición.

Si desea probar varias condiciones, puede usar ng-if disponible con la versión 1.1.5

Reference

Es importante tener en cuenta que el uso de ng-if y ng-switch eliminan el elemento de la estructura DOM , a diferencia de mostrar y ocultar.

Esto es importante cuando atraviesas el DOM para encontrar elementos.