angularjs - AngularJS：ng-switch-when 与 OR

Question

ng-switch-when 是否可以有 OR？

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

如果没有，如何实现上述目标？

谢谢 ：）

Answer 1

ngswitch仅允许您比较单个条件。

ng-if我您正在寻找可以在1.1.5 版中使用的多种条件

参考

重要的是要注意使用ng-if和ng-switch 从 DOM结构中删除元素，而不是显示和隐藏。

当您遍历 DOM 以查找元素时，这一点很重要。

Answer 2

现在可以使用ng-switch-when-separator1.5.10 中添加到 Angular 文档中的内容：

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

这也可以

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

Answer 4

我创建了一个简单的指令来代替它，ngSwitchWhen它允许您为单个标签指定多个案例。它还允许您指定动态值而不是纯静态值。

需要注意的是，它只在编译时评估一次表达式，因此您必须立即返回正确的值。出于我的目的，这很好，因为我想使用应用程序中其他地方定义的常量。可能可以对其进行修改以动态重新评估表达式，但这需要使用ngSwitch.

我使用的是 angular 1.3.15，但我使用 angular 1.4.7 进行了快速测试，它在那里也运行良好。

Plunker 演示

编码

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

用法

控制器

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

Answer 5

您可以使用ng-class，以便您可以or在表达式中使用运算符。此外，angular-ui 有if指令。