Question

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

这是我的代码：

<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问题：

也许还有其他人，但我找不到任何适合我的东西。该代码完美无缺。我让面板显示我想要的方式，而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

中的演示

＆＃13;

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"}
  ];

});

＆＃13;

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

＆＃13;

如何使用AngularJS ng-repeat

1 个答案:

这是StackSnippets