AngularJS：ng-switch-when 与 OR答案

【问题标题】：AngularJS: ng-switch-when with an ORAngularJS：ng-switch-when 与 OR
【发布时间】：2013-01-07 16:57:21
【问题描述】：

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>

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

谢谢:)

【问题讨论】：

你试过了吗|| ? val1||val2 ，我想它应该可以工作。
需要覆盖，详细方法如下：stackoverflow.com/questions/17805636/…

标签： angularjs ng-switch

【解决方案1】：

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

如果您希望测试多个条件，您可以使用ng-if 和version 1.1.5 一起使用

Reference

需要注意的是，使用ng-if 和ng-switch remove the element from the DOM 结构，相对于显示和隐藏。

这在您遍历 DOM 以查找元素时很重要。

【讨论】：

正确答案。但是..“这在您遍历 DOM 以查找元素时很重要。” - 奇怪，我不认为我曾经用 Angular 做到这一点，毕竟，它不是 Angular 的方式。
@Blowsie 我也真的不知道（这真的是 Angular 的卖点，不是吗？）。但是有人可能会创建指令并需要该功能，我希望人们知道并了解他们正在实施的内容。
在使用 +、:first-child、:empty 等 CSS 选择器时很重要。

【解决方案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>

【讨论】：

【解决方案3】：

这个也可以

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

【讨论】：

似乎 ngIf 更适合这里。

【解决方案4】：

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

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

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

Plunker Demo

代码

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>

【讨论】：

很好，我称之为ng-switch-multiple-when

【解决方案5】：

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

【讨论】：