使用ng-class和ng-click切换手风琴面板图标

6 回答

• 2

  我建议您从AngularUI团队查看“UI Bootstrap” . 它是“用纯AngularJS编写的Bootstrap组件”的集合 .

  http://angular-ui.github.io/bootstrap/

  他们的网站上有一个示例，显示他们的Accordion指令使用 ng-class 来切换V形图标 .

  http://angular-ui.github.io/bootstrap/#/accordion

  他们的指令还具有 close-others 属性，如果该属性为真，则确保在任何时候只打开一个面板 .

  <accordion close-others="true">
  

  回复于 2024-05-02T15:23:21+08:00
• 3

  这是我尝试过的，它似乎工作

  在我的控制器中我有

  $scope.menuStatus = [   { isOpen : true     },
                          { isOpen : false    }, 
                          { isOpen : false    } ]
  

  在我的HTML中我有

  <accordion id='cntLeftMenu' close-others='false'>
      <accordion-group is-open='menuStatus[0].isOpen'>
          <accordion-heading class='menu-title'>
              Cars <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menuStatus[0].isOpen , 'glyphicon-chevron-right': !menuStatus[0].isOpen }"></i> 
          </accordion-heading>
          <ul class='left-menu'>
              <li><a href=''>test1</a></li>
              <li><a href=''>test1</a></li>
              <li><a href=''>test1</a></li>
          </ul>
  
      </accordion-group>
  
      <accordion-group is-open='menuStatus[1].isOpen'>
          <accordion-heading class='menu-title'>
              Customers <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menuStatus[1].isOpen , 'glyphicon-chevron-right': !menuStatus[1].isOpen }"></i> 
          </accordion-heading>
          <ul class='left-menu'>
              <li><a href=''>test1</a></li>
              <li><a href=''>test1</a></li>
              <li><a href=''>test1</a></li>
          </ul>
  
      </accordion-group>
  
      <accordion-group is-open='menuStatus[2].isOpen'>
          <accordion-heading class='menu-title'>
              Staff <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menuStatus[2].isOpen , 'glyphicon-chevron-right': !menuStatus[2].isOpen }"></i> 
          </accordion-heading>
          <ul class='left-menu'>
              <li><a href=''>test1</a></li>
              <li><a href=''>test1</a></li>
              <li><a href=''>test1</a></li>
          </ul>
  
      </accordion-group>
  
  
  <accordion>
  

  回复于 2024-05-02T15:23:21+08:00
• 0

  How about working with CSS? Bootstrap在具有 data-toggle="collapse" 的 html 元素上添加了一个类 collapsed . 幻灯片打开后，它将删除此 collapsed 类 . 然后我们可以使用 css 来旋转 span 元素（具有 data-toggle 属性的元素的子元素） .

  <style>
  
   button.collapsed span {
    transform: rotate(-90deg);
   }
  </style>
  <button type="button" class="btn btn-info collapsed" data-toggle="collapse" data-target="#demo">
   Simple collapsible
   <span class="glyphicon glyphicon-chevron-down"></span>
  </button>
  <div id="demo" class="collapse">
   Lorem ipsum dolor...
  </div>
  

  IMPORTANT NOTE ：确保将 collapsed 类添加到具有 data-toggle="collapse" 属性的元素，以使其顺利运行 . 否则，在初始加载元素时， span 元素第一次不会按预期旋转 .

  回复于 2024-05-02T15:23:21+08:00
• 3

  做了一些研究，当它切换打开时，我能够使用this method将类 open 添加到 panel-header . 这个示例允许打开多个面板并使用Angular Strap Collapse .

  模板：

  <div class="panel-group" 
       role="tablist" 
       data-ng-model="multiplePanels.activePanels" 
       data-allow-multiple="true" 
       data-bs-collapse>
     <div class="panel panel-default" ng-repeat="location in locations">
         <div class="panel-heading" 
              role="tab" 
              data-ng-class="{'open' : multiplePanels.activePanels.indexOf($index) > -1}"
              bs-collapse-toggle>
              <h3>Some Header Stuff</h3>
         </div>
         <div class="panel-collapse" role="tabpanel" bs-collapse-target>
              <div class="panel-body">
                  <p>Stuff in the panel body...</p>
              </div>
         </div>
     </div>
  </div>
  

  控制器中的JS：

  $scope.multiplePanels.activePanels = [];
  

  回复于 2024-05-02T15:23:21+08:00
• 3

  我想过的最简单的解决方案 . 而不是使用任何控制器，

  <div 
    class="fa fa-fw list-arrow" 
    ng-class="{'fa-angle-down': isClicked, 'fa-angle-right' : !isClicked}" 
    ng-click="isClicked = !isClicked">
  </div>
  

  你可以像我一样写作 .

  回复于 2024-05-02T15:23:21+08:00
• 2

  经过一些研究，我有一种方法可以解决这个问题 .

  JS：

  $scope.firstpaneisopen = false;
  $scope.secondpaneisopen = false;
  

  在第一个窗格上修改了ng-click：

  <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" ng-click="firstpaneisopen=!firstpaneisopen; secondpaneisopen=false">
  

  反之亦然在第二个窗格上 .

  我不认为这是任何优雅的解决方案，特别是如果我们有两个以上的窗格，但它的工作原理 .

  回复于 2024-05-02T15:23:21+08:00