AngularJS: ng-switch-when with an 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

现在可以使用 1.5.10 中添加到 Angular 文档中的ng-switch-when-separator：

<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进行更多测试。

我使用的是角度 1.3.15，但我用角度 1.4.7 进行了快速测试，它在那里也工作正常。

普伦克演示

《守则》

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指令。