2013-04-02 76 views
1

我剛開始研究一個需要我學習AngularJS的項目。我想要做的是創建兩個滑動到屏幕上的菜單,一個從左側,一個從右側。當他們這樣做時,他們會把內容推到一邊。angularjs - 從多個ng點擊切換ng-class

目前我可以得到一個或另一個工作,但不是兩個。我意識到這是因爲我定義ng級的方式。我只是不能概念化如何正確地做到這一點。

<div ng-class="{true:'slide-left', false:''}[toggleSlide]" class="container"> 

    <div class="content"> 
     <button ng-click="toggleSlide = !toggleSlide" class="btn-left">From Left</button> 
     <button ng-click="toggleSlide = !toggleSlide" class="btn-right">From Right</button> 
    </div> 

    <div class="slide-from-left"> 
     <p>Here is information that slides from off screen left.</p> 
    </div> 

    <div class="slide-from-right"> 
     <p>Here is information that slides from off screen right.</p> 
    </div> 
</div> 
+1

它很難理解你正在試圖做什麼。你是否希望能夠同時顯示?也許你只需要2個變量 - 一個是左右滑動的,另一個是右右滑動的。 – Justen

+0

你可以發佈一個Plunker嗎? –

+0

一次只能顯示一個。如果您已經在iPhone上看到Facebook應用程序的功能,這與您帳戶菜單左側的滑動非常相似,請向右滑動聊天中的聯繫人。 我將盡快獲得jsfiddle。 – Hughes

回答

2

搭建納克級的語法,這樣你想要的東西:

<div ng-class="{'slide-left':toggleSlide, 'slide-right':!toggleSlide}" class="container">

而且,我猜你試圖去適應你的代碼別的東西,你所看到的,所以我也會提供一些相關信息。下面是一個使用ng-classng-repeat$index施捨類奇數和偶數:

ng-class="['even', 'odd'][$index % 2]"