Question

我正在使用Angular和Angular-strap，项目差不多完成但是客户希望我改变我正在使用的手风琴的行为，我不会使用Angular-ui以防你想提及，我正在使用常规的Bootstrap Collapse插件，如你所知，为了让它工作你需要设置一些属性，我现在遇到的问题是每一支手风琴都有一个独特的id，但正如我所提到的上面我在我的HTML中只用一个手风琴生成动态数据，负责根据我从DB请求的数据生成更多的手风琴，但是所有的手风琴都有相同的id，所以行为我的手风琴很奇怪，只打开和关闭第一个面板，如果我点击第二个面板，第一个面板自动关闭但第二个面板保持关闭状态。

这是我的HTML：

     <div class="panel-heading" id="headingOne" ng-click="addSportToLines(sport)">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion"
            data-target="#collapseOne"
            aria-expanded="true"
            aria-controls="collapseOne">
          {{::sport.name }}
        </a>
        <span class="pull-right badge">{{::sport.leagues.length }}</span>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel"
      aria-labelledby="headingOne">
      <div class="panel-body">
        <div class="list-group leagues-margin">
          <a href="javascript:void(0)"
            ng-repeat="league in sport.leagues"
            ng-click="addLeagueToLines(league)">{{:: league.name}}
          </a>
        </div>
      </div>

我确信问题出在这行代码上

<a data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne"
   aria-expanded="true"
   aria-controls="collapseOne">
   {{::sport.name }}
</a>

或在这里：

<div id="collapseOne" class="panel-collapse collapse" role="tabpanel"
 aria-labelledby="headingOne">

或两者......某人有解释？

如何提供不同的id或我有哪些选项？

与此https://wordpress.stackexchange.com/questions/168420/getting-bootstrap-accordion-working-in-wordpress-loop-with-custom-post-type-col类似，但没有PHP代码。

Angular / Bootstrap - 带动态数据的Bootstrap Accordion无法正常工作

0 个答案: