切換CSS類angularjs

我知道有一些類似的問題，但我想用「SHOWME」，顯示的CSS類爲u可以在下面的代碼中看到：切換CSS類angularjs

<section> 
    <article class="" data-ng-controller="AplicationCtrl" data-ng-init="init();"> 
     <nav class="navbar menu-nav " role="navigation"> 
      <a href="" data-ng-click="showme=false; left=true;">Show</a> 
      <button data-ng-click="showme=true; left=false;" >Hide</button> 
     </nav> 
     <div class="navbar-default sidebar" role="navigation" data-ng-show="showme"> 
      <div class="sidebar-nav navbar-collapse"> 
       <ul class="nav customnavhov" id="side-menu"> 
        <li><a href="#"><i class="fa fa-dashboard fa-fw fa-2x"></i></a></li> 
       </ul> 
      </div> 
     </div>   
     <div class="navbar-default sidebar" role="navigation" data-ng-hide="showme"> 
      <div class="sidebar-nav navbar-collapse"> 
       <ul class="nav customnavhov" id="side-menu"> 
        <li><a href="#"><i class="fa fa-dashboard fa-fw fa-2x"></i> Random text </a></li> 
       </ul> 
      </div> 
     </div> 
     <section data-ng-class="{'max-margin': showme,'min-margin':!showme}"> Content </section> 
    </article> 
</section>

的aplication顯示取決於價值showme的第一個或第二個div，但現在我想讓右側的內容有一個餘裕，取決於選擇哪一個。

我的控制器：

.controller（ 'ApplicationCtrl'，[ '$範圍'，函數（$範圍）{

$scope.init = function() { 
    }; 

    $scope.showme = false;

}]）

好了，現在這是奇怪，如果我把按鈕放在部分內，只能用來顯示/隱藏div，如果我把它放在部分之後，只能使用邊距。不知道如何解決它。

來源

2015-06-11 Noble

如果你想當showme爲真時要添加的類 –

我只是以一種部分工作的方式粘貼代碼，但之前它就像你說的，沒有工作。 – Noble

你能解釋一下你的部分工作意思嗎？ –

可以使用納克級的Ismapro的建議。以下是該增加部分納克級= 「{ '派左'：SHOWME}」的一個例子

Example

data-ng-class="{'one': showme,'two':!showme}"

CSS

.one{margin-left:25px;} 
.two{margin-left:75px;}

來源

2015-06-11 09:48:02 Navaneet

好的，這至少在showme爲false時顯示邊距，但當它爲true時不會改變。 – Noble

它的確如此。請正確檢查小提琴。嘗試單擊顯示並隱藏更改內容左邊緣的鏈接。 – Navaneet

是的，它對這個例子很好，但在我的項目中沒有。 – Noble

可以pearhaps使用conditionnal

ng-class="{'contentmargin':showme}"

與

.contentmargin{margin-left:Xpx;}

https://docs.angularjs.org/api/ng/directive/ngClass

來源

2015-06-11 09:31:45 Ismapro

我已經嘗試過，但不起作用 – Noble

，但showme變量可以從作用域訪問。 @Navaneeth樣本是否符合您所需的解決方案？ – Ismapro

它在這個例子中有效，但在我的項目中絕不會改變它們 – Noble

切換CSS類angularjs

回答

相關問題