javascript、jquery、angularjs、twitter-bootstrapの2つの動的に生成されたブートストラップアコーディオンが互いに競合しています

ここでAngularで作業すると、アプリケーションには1つのブラウザタブ内で複数の「ペイン」を開く機能。これらのペインは、本質的に独自のブラウザタブのように機能します。標準的なブートストラップセットアップを使用して、ブートストラップアコーディオンを取得しました。

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#accordionOne"></a>
</div>
<div id="accordionOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="">CONTENT</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo"></a>
</div>
<div id="accordionTwo" class="panel-collapse collapse in">
<div class="panel-body">
<div class="">CONTENT 2</div>
</div>
</div>
</div>
</div>

ここでの問題は、複数のペインがあるためです。ユーザーが2つのペインを同じ領域に開いて、このアコーディオンを2回レンダリングできる可能性があります。これを行うと、2番目にレンダリングされたアコーディオンの要素をクリックしても、最初のアコーディオンのみが制御されます。

見る このフィドル 例えば

ユーザーが一度にこの「ペイン」を生成できる回数がわからないので、この種のことに取り組むための良いアプローチはありますか？

注：これがデータターゲットなどすべてで発生している理由を知っています。これは、それを動的に解決する方法に関する質問です。

接線方向に関連

回答：

これらには一意のID属性が必要です。 2番目を accordion2 またはその他の一意の識別子。 すべてのパネルにも一意のIDが必要です。それらが動的に生成される場合、各ロジックを同じIDで繰り返し使用するのではなく、ロジックを変更して一意のIDを生成する必要があります。

http://www.bootply.com/85EJ8o0bWu

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#accordionOne">Section One</a>
</div>
<div id="accordionOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="">CONTENT</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo">Section 2</a>
</div>
<div id="accordionTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="">CONTENT 2</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#accordionThree">Section 3</a>
</div>
<div id="accordionThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="">CONTENT 3</div>
</div>
</div>
</div>
</div>

<div class="panel-group" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion2" href="#accordionOne2">Section One</a>
</div>
<div id="accordionOne2" class="panel-collapse collapse">
<div class="panel-body">
<div class="">CONTENT</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion2" href="#accordionTwo2">Section 2</a>
</div>
<div id="accordionTwo2" class="panel-collapse collapse">
<div class="panel-body">
<div class="">CONTENT 2</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion2" href="#accordionThree2">Section 3</a>
</div>
<div id="accordionThree2" class="panel-collapse collapse">
<div class="panel-body">
<div class="">CONTENT 3</div>
</div>
</div>
</div>
</div>

「理解することを特に望んでいる場合 角度の繰り返し、データの構造に大きく依存します。ng-repeatにはさまざまなアプローチがあります。

AngularでのBootstrapアコーディオンの繰り返し.

属性 data-target アコーディオン本体として同一でなければなりません id.

次の例を参照してください。

<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-target="#accordionTwo" data-parent="#accordion"></a>
</div>
<div id="accordionTwo" class="panel-collapse collapse in">
<div class="panel-body">
<div class="">CONTENT 2</div>
</div>
</div>
</div