Angular JS - HTMLアコーディオンがng-repeatで壊れています

Question

私は自分のプロジェクトに取り組んでいるいくつかのテンプレートで少し助けが必要です。 私は、インターネット上のアコーディオンコンテナのためにこのコードを見つけた：、それが正常に動作します

/* Toggle between adding and removing the "active" and "show" classes when the user clicks on one of the "Section" buttons. The "active" class is used to add a background color to the current button when its belonging panel is open. The "show" class is used to open the specific accordion panel */ 
 
var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 
     this.classList.toggle("active"); 
 
     this.nextElementSibling.classList.toggle("show"); 
 
    } 
 
}

/* Style the buttons that are used to open and close the accordion panel */ 
 
button.accordion { 
 
    background-color: #eee; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    text-align: left; 
 
    border: 1px solid lightgray; 
 
    outline: none; 
 
    transition: 0.4s; 
 
} 
 

 
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ 
 
button.accordion.active, button.accordion:hover { 
 
    background-color: #ddd; 
 
} 
 

 
/* Style the accordion panel. Note: hidden by default */ 
 
div.panel { 
 
    padding: 0 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: 0.6s ease-in-out; 
 
    opacity: 0; 
 
} 
 

 
/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */ 
 
div.panel.show { 
 
    opacity: 1; 
 
    max-height: 500px; 
 
} 
 

 
button.accordion:after { 
 
    content: "+"; /* Unicode character for "plus" sign (+) */ 
 
    font-size: 13px; 
 
    color: #777; 
 
    float: right; 
 
    margin-left: 5px; 
 
} 
 

 
button.accordion.active:after { 
 
    content: "-"; /* Unicode character for "minus" sign (-) */ 
 
}

<button class="accordion">Section 1</button> 
 
<div class="panel"> 
 
    <p>Lorem ipsum...</p> 
 
</div> 
 

 
<button class="accordion">Section 2</button> 
 
<div class="panel"> 
 
    <p>Lorem ipsum...</p> 
 
</div> 
 

 
<button class="accordion">Section 3</button> 
 
<div class="panel"> 
 
    <p>Lorem ipsum...</p> 
 
</div>

私が望んでいたまさに、良さそうに見えます。しかし、私はこのような何かをしようとすると：

<div ng-repeat="category in categories"> 
 
        <button class="accordion">{{category.name}}</button> 
 
        <div class="panel"> 
 
         <p>{{category.description}}</p> 
 
        </div> 
 
       </div>

タブはもう開きません。私は問題を見つけることができません。誰も私にこれに対する解決策を与えることができますか？ ありがとうございます。ここで

Answer 1

これを行うための別のアプローチである：

1. 彼のクラスactiveを切り替えるボタンにng-clickを追加します。
2. .showセレクタをbutton.active + div.panelに変更すると、ボタンクラスのみを変更できます。

angular.module('app', []).controller('ctrl', function($scope) { 
 
    $scope.categories = []; 
 
    for (var i = 1; i <= 3; i++) { 
 
    $scope.categories.push({ 
 
     name: 'cat' + i, 
 
     description: 'description' + i 
 
    }); 
 
    } 
 
}); 
 

 
var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function(){ 
 
    this.classList.toggle("active"); 
 
    this.nextElementSibling.classList.toggle("show"); 
 
    } 
 
}

button.accordion { 
 
    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; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: 0.6s ease-in-out; 
 
    opacity: 0; 
 
} 
 

 
button.active + div.panel { 
 
    opacity: 1; 
 
    max-height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<h2>Animated Accordion</h2> 
 

 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div ng-repeat="category in categories"> 
 
    <button class="accordion" data-ng-click="category.active = !category.active" data-ng-class="{'active': category.active}">{{category.name}}</button> 
 
    <div class="panel"> 
 
     <p>{{category.description}}</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

var app = angular.module('app',[]); 
 
    app.controller('mycontroller',function($scope){ 
 
     $scope.categories = [{name:'Lorem ipsum...'},{name:'Lorem ipsum...'},{name:'Lorem ipsum...'}] 
 

 
    });

<html ng-app='app'> 
 
     <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script> 
 
     </head> 
 
    <body ng-controller='mycontroller'> 
 
    <div ng-repeat="category in categories"> 
 
          <button ng-class="accordion">{{category.name}}</button> 
 
          <div ng-class="panel"> 
 
           <p>{{category.description}}</p> 
 
          </div> 
 
         </div></body> 
 
     </html>