使用带有angularjs的bootstrap折叠

Question

我正试图在我的角应用程序中包含下面的bootstrap可折叠面板.但是,当我单击"展开"时,角度似乎看到href="#collapseOne"然后重定向到主页而不是折叠面板.我的路由看起来像这样,我认为这otherwise({redirectTo: '/home'});导致了问题.有什么建议？

angular.module('App')
.config(['$routeProvider', function($routeProvider) { 
$routeProvider.
  when('/users', {templateUrl: 'partials/users/user-list.html', controller: 'UserCtrl'}).
  when('/users/new', {templateUrl: 'partials/users/user-new.html', controller: 'UserNewCtrl'}).
  when('/users/:userid', {templateUrl: 'partials/users/user-detail.html', controller: 'UserDetailCtrl'}).


  otherwise({redirectTo: '/home'});
}]);

小组 -

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Expand
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        ...
      </div>
    </div>
  </div>
  </div>

Answer 1

作为一个类似的问题mentionned 在这里,简单地由数据目标属性改变您的href

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a href="javascript:;" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
          Expand
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        ...
      </div>
    </div>
  </div>
</div>

Answer 2

您可以使用AngularJS UI Bootstrap中的accordion指令,该指令构建在twitter bootstrap的崩溃指令之上.

例:

 <accordion >
    <accordion-group heading="Static Header, initially expanded" is-open="true">
      This content is straight in the template.
    </accordion-group>
 </accordion>

实例:http://jsfiddle.net/choroshin/U89bW/3/

Answer 3

我有同样的问题,我不想在bootstrap之外添加额外的库.按照建议,您可以使用data-target="#your-collapsing-element",href完全删除属性.

基础

要使面板崩溃,您需要:

1. 在用于触发崩溃的元素上:

   data-toggle="collapse" data-target="#my-collapsing-element"
   

2. 在崩溃的元素上:

   id="my-collapsing-element"
   

3. 在包含"trigger"元素和collapsing元素的元素上:

   class="panel"
   

把它们放在一起

您可以选择添加父元素以使其成为组的一部分,并添加将css类" collapse in" 添加到collapsing元素以使其默认状态关闭.一个完整的例子:

<div id="accordion">
    <div class="panel">
        <a data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
            Heading 1
        </a>
        <div id="collapse1">
            Content for panel 1
        </div>
    </div>
    <div class="panel">
        <a data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
            Heading 2
        </a>
        <div id="collapse2" class="collapse in">
            Content for panel 2
        </div>
    </div>
</div>

您可以通过使用<button>元素而不是使用元素来获得更好的按钮行为<a>.覆盖bootstrap的样式.panel可以通过为panelcss类添加自己的样式来完成.

<div class="panel its-my-panel">

.panel.its-my-panel {
  margin-bottom: 0;
  background-color: transparent;
  border: none;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.my-panel-heading {
  cursor: pointer;
}
/* Overrides for .panel--theonly required bootstrap class */

.panel.my-panel-overrides {
  margin-bottom: 0;
  background-color: transparent;
  border: none;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="accordion">
  <div class="panel my-panel-overrides">
    <a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
        Collapsible Group 1</a>
    <div id="collapse1" class="collapse in">
      Content for panel 1
    </div>
  </div>
  <div class="panel my-panel-overrides">
    <a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
        Collapsible Group 2</a>
    <div id="collapse2" class="collapse">
      Content for panel 2
    </div>
  </div>
  <div class="panel my-panel-overrides">
    <a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse3">
        Collapsible Group 3</a>
    <div id="collapse3" class="collapse">
      Content for panel 3
    </div>
  </div>
</div>