두 개의 동적으로 생성 된 부트 스트랩 아코디언이 서로 충돌합니다.

Question

여기에서 각도로 작업하면 응용 프로그램이 하나의 브라우저 탭에서 여러 "창"을 열 수 있습니다. 이 창은 기본적으로 자체 브라우저 탭처럼 작동합니다. 내가 부트 스트랩 설정의 표준 종류의 사용, 부트 스트랩 아코디언있어 : 여기

<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 개 창을 열고 렌더링 할 수 있다는 가능성이 있다는 것입니다 이 아코디언 두 번. 이렇게하면 두 번째 렌더링 된 아코디언의 요소를 클릭하면 첫 번째 아코디언 만 제어됩니다. 나는 사용자가 한 번에이 "창"을 생성 할 수있는 얼마나 많은 시간 아무 생각이 없기 때문에

예를

에 대한 this fiddle를 참조하십시오, 이런 종류의 물건을 다루는위한 좋은 방법은 무엇입니까?

참고 : 데이터 타겟 및 전체에서 왜 이런 일이 발생하는지 알고 있습니다. 이것은 동적으로 그것을 해결하는 방법에 대한 질문입니다.

Tangentially related

Answer 1

그들은 고유 한 ID 속성이 있어야합니다. 두 번째를 accordion2 또는 다른 고유 식별자로 변경하십시오. 모든 패널에는 고유 한 ID가 있어야합니다. 동적으로 생성 된 경우 각 반복에서 동일한 ID를 다시 사용하는 대신 고유 한 ID를 생성하도록 논리를 변경해야합니다.

<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> 

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

특별히 모난에서 반복을 이해하기 위해 찾고 있다면, 그것은 정말 데이터가 어떻게 구성되어 있는지에 따라 달라지며 NG 반복 많은 다른 접근 방법이있다.

Repeating Bootstrap accordions with Angular.

Answer 2

속성 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 

:

는 예를 참조하십시오