Question

我有一个jsfiddle example来说明手风琴在没有角度的情况下有效;在无角度示例中，您可以看到当我单击新面板时前一个面板关闭，您还可以看到每个面板之间有间距。当我添加角度并且从对象阵列构建面板时，手风琴不再正常工作;相反，单击新面板时前一个面板不会折叠，并且每个面板之间的间距不再存在。我比较了代码，我无法弄清楚我做错了什么，你能看出出了什么问题吗？

HTML：

<div class="container" ng-controller="cntrl">
<p>No angular:</p>
  <div class="panel-group" id="accordion">
    <div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
      <div class="panel-heading">
        <h4 class="panel-title">
          Collapsible Group 1
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
      <div class="panel-heading">
        <h4 class="panel-title">
          Collapsible Group 2
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse3">
      <div class="panel-heading">
        <h4 class="panel-title">
          Collapsible Group 3
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
  </div>

  <!-- now using angular -->
    <p>Using angular (<em>notice the previous panel no longer collapses and the spacing between the panels does not exist like in my no angular example</em>):</p>
  <div class="panel-group" id="ngaccordion">
    <div ng-repeat="prop in someObj">
      <div class="panel panel-default" data-toggle="collapse" data-parent="#ngaccordion" data-target="#{{prop.id}}">
        <div class="panel-heading">
          <h4 class="panel-title">
            {{prop.contractName}}
          </h4>
        </div>
                <!-- Instead of {{prop.id}} for id below and data-target above I have also tried "test{{$index}}" -->
        <div id="{{prop.id}}" class="panel-collapse collapse" ng-class="{ 'in' : $first}">
          <div class="panel-body">
            <ul class="list-group">
              <li class="list-group-item">
                <label>Price:</label> {{prop.price | currency:"$" }}</li>
              <li class="list-group-item">
                <label>Start Date:</label> {{prop.startDate}}</li>
              <li class="list-group-item">
                <label>End Date:</label> {{prop.endDate}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JS：

var app = angular.module('app', []);

app.controller('cntrl', ['$scope', function($scope) {
  $scope.someObj = [{
    id: 'test1',
    contractName: 'Test One',
    price: 0.00,
    startDate: moment().format("YYYY-MM-DD"),
    endDate: moment().add(6, 'months').format("YYYY-MM-DD")
  }, {
    id: 'test2',
    contractName: 'Test Two',
    price: 20.00,
    startDate: moment().add(6, 'months').format("YYYY-MM-DD"),
    endDate: moment().add(12, 'months').format("YYYY-MM-DD")
  }, {
    id: 'test3',
    contractName: 'Test Three',
    price: 40.00,
    startDate: moment().add(12, 'months').format("YYYY-MM-DD"),
    endDate: 'NO END'
  }];
}]);

任何帮助将不胜感激！

Answer 1

由于你在另一个div中添加了ng-repeat，这是一个手风琴元素的父节点（ Bootstrap is confounded as to where the other ones are! :) ），这个问题正在发生，为了解决这个问题，只需设置{在ng-repeat div本身内部{1}}，请参阅下面的示例。

<强>之前：

panel

<强>后：

<div class="panel-group" id="ngaccordion">
    <div ng-repeat="prop in someObj">
      <div class="panel panel-default" data-toggle="collapse" data-parent="#ngaccordion" data-target="#{{prop.id}}">
        <div class="panel-heading">
          <h4 class="panel-title">

＆＃13;

<div class="panel-group" id="ngaccordion">
    <div ng-repeat="prop in someObj" class="panel panel-default" data-toggle="collapse" data-parent="#ngaccordion" data-target="#{{prop.id}}">
      <div class="panel-heading">
        <h4 class="panel-title">

＆＃13;

var app = angular.module('app', []);

app.controller('cntrl', ['$scope', function($scope) {
  $scope.someObj = [{
    id: 'test1',
    contractName: 'Test One',
    price: 0.00,
    startDate: moment().format("YYYY-MM-DD"),
    endDate: moment().add(6, 'months').format("YYYY-MM-DD")
  }, {
    id: 'test2',
    contractName: 'Test Two',
    price: 20.00,
    startDate: moment().add(6, 'months').format("YYYY-MM-DD"),
    endDate: moment().add(12, 'months').format("YYYY-MM-DD")
  }, {
    id: 'test3',
    contractName: 'Test Three',
    price: 40.00,
    startDate: moment().add(12, 'months').format("YYYY-MM-DD"),
    endDate: 'NO END'
  }];
}]);

＆＃13;

.container {
  margin-top: 15px;
}

＆＃13;

使用面板作为角度为

1 个答案: