展開AngularJS中的摺疊按鈕

Question

我打算在使用AngularJS在流中顯示的每篇文章的底部創建多個展開/摺疊按鈕。 這是我的頁面結構是什麼樣子：

<h1>Heading of the Page</h1> 
<div class="item-content-wrapper"> 

<div class="item-content-block"> 
<article id="item-content" class="item-content">Some very long text goes here. 
</article> 
</div> 
<div class="action-bar-wrapper"> 
    <div class="action-bar"> 
     <div class="action-button"> 
      <icon name="expand">E</icon> 
     </div> 
     <div class="action-button"> 
      <icon name="share">S</icon> 
     </div> 
    </div> 
</div> 

我有多個item-content-blocks，我想展開和摺疊使用AngularJS每個塊（請不要在任何地方使用jQuery）。 由於將有多個塊，具有相同的類名稱和所有內容，因此需要一個可伸縮的代碼。

我剛剛開始與AngularJS，所以任何幫助將不勝感激。謝謝！

Answer 1

由於將有多個塊，具有相同的類名和所有內容，因此需要一個可伸縮的代碼。

你基本上應該讓每個塊在你的視圖模型中驅動一個項目。只是每個項目的expanded（布爾）選項。然後，您可以使用ngClass來驅動css類。

更多

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