Question

在这里使用Angular，应用程序可以打开多个＆＃34;窗格＆＃34;在一个浏览器标签内。这些窗格基本上像他们自己的浏览器选项卡一样。我使用标准的引导程序设置获得了一个bootstrap手风琴：

<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

因为我不知道用户可以多少次生成这个＆＃34; pane＆＃34;马上有解决这类问题的好方法吗？

注意：我知道为什么会发生这种情况，包括数据目标和所有数据。这是一个关于如何动态解决这个问题的问题。

Tangentially related

Answer 1

他们应该拥有唯一的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>

如果您特别想要了解Angular 中的迭代，那么它实际上取决于数据的结构，并且有许多不同的ng-repeat方法。

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

两个动态生成的bootstrap手风琴相互冲突

2 个答案: