angularjsのアコーディオン

Question

私はangularjsアプリでaccordianを追加したいと思います。ボタンをクリックして「追加情報」をクリックして詳細を表示する必要があります。ボタンのクリックでクラスパネルを切り替える方法がわからないここで

は私のhtmlです：

<button ng-click="showPanel()" class="accordian">Additional Information</button> 

    <br> 

    <div class="panel" style="width: 750px;"> 
     <div class="panel-heading">Attributes</div> 
      <table class="table table-bordered">      
       <tbody> 
        <tr > 
         <td>{{room.allowFecc}}</td> 
        </tr> 
       </tbody> 
      </table> 
    </div> 

CSS：

button.accordian { 
background-color: #eee; 
color: #444; 
cursor: pointer; 
padding: 18px; 
width: 100%; 
border: none; 
text-align: left; 
outline: none; 
font-size: 15px; 
transition: 0.4s; 
} 

button.accordion.active, button.accordion:hover { 
background-color: #ddd; 
} 

div.panel { 
padding: 0 18px; 
display: none; 
background-color: white; 
} 

div.panel.show { 
display: block; 
} 

Answer 1

あなたは単にdisplay: blockないクラスをドロップすることができます - 角度はの世話をするngShowとngHideのようなディレクティブを内蔵していますこれはあなたのためです。基本的にAngularでは、データを操作してから、ビューをデータにバインドさせます。上記の基本的な例

、あなたが変数に基づいて、その後アコーディオンを表示したり、それを隠すためにtrueからfalseに変数を切り替える、としたい、クラスを追加します。

角度：

$scope.toggleAccordian = function() { 
    $scope.showAccordian = !$scope.showAccordian; //our toggle variable 
} 

HTML：

<button ng-click="toggleAccordian()" class="accordian">Additional Information</button> 

<br> 

<div class="panel" ng-show="showAccordian" ng-class="{'accordianActiveClass': showAccordian }" style="width: 750px;"> 
    <div class="panel-heading">Attributes</div> 
     <table class="table table-bordered">      
      <tbody> 
       <tr > 
        <td>{{room.allowFecc}}</td> 
       </tr> 
      </tbody> 
     </table> 
</div> 

ng-class="{'accordianActiveClass': showAccordian }"はCLでaccordianActiveClassを置き換える、クラスの魔法でありますおしゃぶりを表示し、条件が満たされたら（showAccordian）、クラスが追加されます。