アコーディオンとアングル

Question

私はアングルで簡単なアコーディオンを作りようとしています。私はこれを思いついた - それは動作しますが、ロジックは超醜いです。これをコード化する良い方法はありますか？

クラスがng-classで適用されると、アコーディオンが開きます。難しいのは、一度に1つのパネルしか開いていないことを確認することです。この投稿を読んでくれてありがとう！

var myApp = angular.module('myApp', []); 
 
myApp.controller('FooterController', ['$scope', 
 
    function($scope) { 
 
    return $scope.toggleFooterNav = function(target) { 
 
     $scope.Panel1 = $scope.Panel2 = $scope.Panel3 = $scope.Panel4 = false; 
 
     switch (target) { 
 
     case 'Panel1': 
 
      return $scope.Panel1 = !$scope.Panel1; 
 
     case 'Panel2': 
 
      return $scope.Panel2 = !$scope.Panel2; 
 
     case 'Panel3': 
 
      return $scope.Panel3 = !$scope.Panel3; 
 
     case 'Panel4': 
 
      return $scope.Panel4 = !$scope.Panel4; 
 
     } 
 
    }; 
 
    } 
 
]);

.footerNavPanel { 
 
     display: none; 
 
    } 
 
    .footerNavPanelActive { 
 
     display: block !important; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div class="columns" ng-controller="FooterController"> 
 
    <h6><a href="#" ng-click="toggleFooterNav('Panel1')">Panel1</a></h6> 
 
    <ul class="footerNavPanel" ng-class="{'footerNavPanelActive' : Panel1}"> 
 
     <li><a>Test</a> 
 
     </li> 
 
    </ul> 
 
    <h6><a href="#" ng-click="toggleFooterNav('Panel2')">Panel2</a></h6> 
 
    <ul class="footerNavPanel" ng-class="{'footerNavPanelActive' : Panel2}"> 
 
     <li><a>Test</a> 
 
     </li> 
 
    </ul> 
 
    <h6><a href="#" ng-click="toggleFooterNav('Panel3')">Panel3</a></h6> 
 
    <ul class="footerNavPanel" ng-class="{'footerNavPanelActive' : Panel3}"> 
 
     <li><a>Test</a> 
 
     </li> 
 
    </ul> 
 
    <h6><a href="#" ng-click="toggleFooterNav('Panel4')">Panel4</a></h6> 
 
    <ul class="footerNavPanel" ng-class="{'footerNavPanelActive' : Panel4}"> 
 
     <li><a>Test</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

申し訳ありませんがちょうど私が思ったよりもはるかに簡単だった、答えを考え出した：

= NG-クリック 'activeFooter = "パネル1"' NG-クラス= "{ 'footerNavPanelActive'：activeFooter ===「Panel1」}」）