如何使用 ng-switch 来满足多个相同的条件？答案

【问题标题】：How can I use ng-switch to satisfy multiple, same conditions?如何使用 ng-switch 来满足多个相同的条件？
【发布时间】：2013-07-23 08:55:19
【问题描述】：

我想根据身份验证状态用 AngularJS 创建一段 HTML。

我使用ng-switch。

问题是我想在一个条件下多次点击，但 AngularJS 只满足最后一个条件。

由于具有流畅布局的 Bootrap，HTML 非常接近。 span3 和 span9 必须在 row-fluid 容器 div 的正下方，否则它不会很好地浮动。所以我不能给它引入额外的ng-switch div...

<div class="row-fluid" ng-switch on="user.isAuthenticated">
<div class="span3" ng-switch-when="true"><div>
<div class="span9 spade-contentwrapper" ng-switch-when="true"><div>
<div class="spade-contentwrapper" ng-switch-when="false"><div>
<div>

查看我的简化版fiddle。

【问题讨论】：

标签： angularjs

【解决方案1】：

Angular 1.1.5 支持ng-if。你可以看看that。然后你可以有独立的条件。

【讨论】：

不幸的是 1.1.5 是一个不稳定的版本。是否有可能在 1.0.7 stable 中使用解决方法？
我相信 ng-if 取自 angularui。你有 1.1.5 的源代码。如果它没有任何依赖关系，则将其作为源代码拉出来。
我用 ng-show 而不是 ng-if 或 ui-if 修复了它，它可以工作。当 AngularJS 1.1.5 变得稳定（或升级为稳定）时，我将用 ng-if 语句替换 ng-show，这样 DOM 就不会被污染。谢谢。
举个例子就好了。

【解决方案2】：

有人重写了 ngSwitchWhen 指令以包含允许 || 的选项。运营商，您可以在此处找到原始回复：http://docs.angularjs.org/api/ng.directive:ngSwitch by angabriel

config(function($routeProvider, $provide) {
/**
* overwrite angular's directive ngSwitchWhen
* can handle ng-switch-when="value1 || value2 || value3"
*/
    $provide.decorator('ngSwitchWhenDirective', function($delegate) {
    $delegate[0].compile = function(element, attrs, transclude) {
        return function(scope, element, attr, ctrl) {
          var subCases = [attrs.ngSwitchWhen];
          if(attrs.ngSwitchWhen && attrs.ngSwitchWhen.length > 0 && attrs.ngSwitchWhen.indexOf('||') != -1) {
          subCases = attrs.ngSwitchWhen.split('||');
        }
        var i=0;
        var casee;
        var len = subCases.length;
        while(i<len) {
            casee = $.trim(subCases[i++]);
            ctrl.cases['!' + casee] = (ctrl.cases['!' + casee] || []);
            ctrl.cases['!' + casee].push({ transclude: transclude, element: element });
        }
    }
    }
    return $delegate;
  });
});

【讨论】：

感谢 Ty Danielson 发布我几周前找到的解决方案。当它帮助别人时，我很高兴。事实证明它仍然适用于最新的 1.2.0-rc.3。顺便说一句：实际上不需要 $routeProvider 的注入，但我想每个 Angular 应用程序都依赖它，所以更清楚这段代码必须去哪里。

【解决方案3】：

不幸的是，ng-switch 指令从 AngularJS 1.1.3 版本开始仅支持多个匹配项。

请参阅changelog 和此commit 作为参考。

【讨论】：