如何在 AngularJS ng-repeat 中使用 Bootstrap 面板

Question

我使用 w3schools.com 上的教程来创建我的面板，但是当我添加 angular 时，我的代码停止工作。

这是我的代码：

<div class="panel-group" id="accordion">
  <div ng-repeat="x in numOfMaps">
    <div class="panel {{x.count}}Details">
      <div class="panel-heading">
        <li class="m2Details m3Details panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#{{x.count}}buildingToggle">
            Building<span class="caret"></span>
          </a>
        </li>
      </div>
      <div id="{{x.count}}buildingToggle" class="panel-collapse collapse {{x.buildingOpen}}">
        <li ng-repeat="y in this[x.count + 'InfoBuilding']" class="{{y.linkclass}} panel-body">
          <a href="{{y.link}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)">
            <img src="{{y.icon}}" width="15px" height="15px">{{y.name}}
          </a>
        </li>
      </div>
    </div>
    <div class="panel {{x.count}}Details">
      <div class="panel-heading">
        <li class="m2Details m3Details panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#{{x.count}}offsiteToggle">
            Offsite<span class="caret"></span>
          </a>
        </li>
      </div>
      <div id="{{x.count}}offsiteToggle" class="panel-collapse collapse {{x.offsiteOpen}}">
        <li ng-repeat="z in this[x.count + 'InfoOffsite']" class="{{z.linkclass}} panel-body">
          <a href="{{z.link}}" ng-click="clickLinks(z.initialOut,z.initialIn,z.backIn,z.backOut,z.name)">
            <img src="{{z.icon}}" width="15px" height="15px">{{z.name}}
          </a>
        </li>
      </div>
    </div>
  </div>

我查看了这些 StackOverflow 问题：

• Accordion effect not working for menu
• Bootstrap Accordion with dynamic data doesn't work properly

也许还有其他人，但我没有找到任何适合我的东西。否则代码可以完美运行。我让面板显示我想要的方式，并且 Angular 填充得很好。

我的问题是当另一个面板打开时面板没有关闭。

我正在使用 UI Bootstrap，所以使用它的解决方案是可以接受的。

---

更新：有了下面的答案，我有一些工作，这似乎是我想要的，但是有一些我不明白如何解决的问题：

<accordion close-others="true">

  <accordion-group ng-repeat="x in numOfMaps" class="{{x.count}}Details" 
                   heading="Building" data-target="#{{x.count}}BuildingToggle" 
                   is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
    <ul id="{{x.count}}BuildingToggle" class="accordion-body">
      <li ng-repeat="y in this[x.count + 'InfoBuilding']" class="{{y.linkclass}}">
        <a href="{{y.link}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)">
          <img src="{{y.icon}}" width="15px" height="15px">
          {{y.name}}
        </a>
      </li>
    </ul>
  </accordion-group>

只要我添加了使状态功能的 js 脚本：

$scope.status = {
    isFirstOpen: true,
    isFirstDisabled: false
};

它们都开始打开一秒钟然后强制关闭并且不会重新打开。我该如何绕过这个？我需要一种使每个手风琴独一无二的方法，因为我认为它们是相互配合的，因为没有数据目标来告诉打开和关闭哪个面板或我不知道的东西。有人知道吗？我需要该 JS 来实现功能，因为我需要一个手风琴保持打开和禁用状态，而其他手风琴可以打开和关闭。

Answer 1

您可以使用Angular-UI Accordion 并设置close-others="true"。

然后在每个重复块中连接您想要的任何逻辑。

这是 StackSnippets 中的演示

var app = angular.module('ui.bootstrap.module', ['ui.bootstrap']);
app.controller('ui.bootstrap.ctrl', function ($scope) {

  $scope.numOfMaps = [ 
    {count: 1, text: "Text 1", header: "Header 1"},
    {count: 2, text: "Text 3", header: "Header 2"},
    {count: 2, text: "Text 3", header: "Header 3"}
  ];

});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>

<div ng-app="ui.bootstrap.module" >
  <div ng-controller="ui.bootstrap.ctrl">


    <accordion close-others="true">
      
      <accordion-group ng-repeat="x in numOfMaps" 
                       heading="{{x.header}}" 
                       is-open="status.isFirstOpen" 
                       is-disabled="status.isFirstDisabled">
        {{x.text}}
      </accordion-group>
      
    </accordion>

  </div>
</div>