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

Question

我想根据身份验证状态创建一段带有AngularJS的超文本标记语言。

我使用ng-switch。

问题是我希望在一个条件上有多个匹配，但是AngularJS只满足最后一个满足的条件。

HTML监听非常近，因为Bootrap具有流畅的布局。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。

Answer 1

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

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

Answer 3

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

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