Angularjs 使用面板作为有角度的手风琴_Angularjs_Twitter Bootstrap

Angularjs 使用面板作为有角度的手风琴

angularjs twitter-bootstrap

Angularjs 使用面板作为有角度的手风琴,angularjs,twitter-bootstrap,Angularjs,Twitter Bootstrap,我有一个手风琴的插图，当使用无角度时，手风琴可以工作；在无角度示例中，当我单击新面板时，您可以看到上一个面板关闭，您还可以看到每个面板之间存在间距。当我添加角度，并从一个对象数组中构建面板时，手风琴不再正常工作；相反，单击新面板时，上一个面板不会折叠，并且每个面板之间的间距不再存在。我已经比较了代码，但我不知道我做错了什么，你能看到什么是错的吗 HTML: <div class="container" ng-controller="cntrl"> <p>No angula

我有一个手风琴的插图，当使用无角度时，手风琴可以工作；在无角度示例中，当我单击新面板时，您可以看到上一个面板关闭，您还可以看到每个面板之间存在间距。当我添加角度，并从一个对象数组中构建面板时，手风琴不再正常工作；相反，单击新面板时，上一个面板不会折叠，并且每个面板之间的间距不再存在。我已经比较了代码，但我不知道我做错了什么，你能看到什么是错的吗

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>

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

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

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

任何帮助都将不胜感激

由于您要在另一个div中添加ng repeat，该div是accordio元素的父级（引导程序对其他div的位置感到困惑：）
），因此出现了此问题，要解决此问题，只需在

面板

div本身内设置

ng repeat

，请参阅下面的示例

之前：

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

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

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

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

.container{
边缘顶部：15px；
}



无角度：

可折叠群1
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
可折叠组2
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
可折叠组3
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。

使用角度（请注意，前面的面板不再塌陷，面板之间的间距不存在，如我的无角度示例中所示）：

{{prop.contractName}}


价格：{{prop.Price}货币：“$”}

开始日期：{prop.startDate}

结束日期：{{prop.endDate}}