如何使用ng-switch來滿足多個相同的條件？

我想根據身份驗證狀態使用AngularJS創建一段HTML。我使用ng-switch。如何使用ng-switch來滿足多個相同的條件？

問題是我想在單個條件上有多個匹配，但AngularJS只滿足最後一個條件。

由於Bootrap流暢的佈局，HTML聽得非常接近。 span3和span9必須是直接在row-fluid以下的容器格，否則不會漂浮得很好。所以我不能引入額外的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。

來源

2013-07-23 Patrick Peters

Angular 1.1.5支持ng-if。你可以看看that。那麼你可以有獨立的條件。

來源

2013-07-23 09:11:56 Chandermani

不幸的是1.1.5是一個不穩定的版本。是否可以有一個解決方案，在1.0.7穩定工作？ –

ng-if是來自於銳吉我相信。你有1.1.5的源代碼。如果它沒有任何依賴關係，將它作爲源代碼提取出來。 – Chandermani

我使用ng-show而不是ng-if或ui-if修正了它，並且它可以工作。當AngularJS 1.1.5變得穩定（或提升爲穩定）時，我會用ng-if語句替換ng-show，這樣DOM就不會被拋棄。謝謝。 –

不幸的是，ng-switch指令僅支持自AngularJS 1.1.3版以來的多個匹配。

查看changelog和commit作爲參考。

來源

2013-07-23 09:37:50 DanEEStar

有人覆蓋了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; 
    }); 
});

來源

2013-10-02 21:01:02

謝謝[Ty Danielson]（http://stackoverflow.com/users/2661425/ty-danielson）發佈我幾周前發現的解決方案。我很高興它能幫助別人。結果表明它仍然可以很好地使用最新的1.2.0-rc.3。順便說一下：$ routeProvider的注入實際上並不需要，但我猜每個角度應用都依賴於它，所以它更清楚代碼必須去的地方。 – angabriel

如何使用ng-switch來滿足多個相同的條件？

回答

相關問題