logo标签列表

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

angularjstwitter-bootstrapaccordionangularjs-ng-click
10

我有一个手风琴，它有“chevron”图标，当单击时可以切换指向上方或下方，这是通过ng-click和ng-class完成的。手风琴只允许同时打开一个面板-因此，当我单击关闭的面板时，打开的面板会关闭。但是，如何使用ng-click在关闭的已打开面板上切换chevron图标呢？

原本我可以通过DOM操作等方式来实现，但由于这是Angular中的部分视图，我无法这样做。

代码：

<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" ng-click="firstpaneisopen=!firstpaneisopen">
           <i class="glyphicon" ng-class="{'glyphicon-chevron-up': firstpaneisopen, 'glyphicon-chevron-down': !firstpaneisopen}"></i> Collapsible Group Item #1
         </a>
      </h4>
     </div>
    <div id="collapseOne" class="panel-collapse collapse in">
     <div class="panel-body">
       Body
     </div>
    </div>
  </div>
  <div class="panel panel-default">
   <div class="panel-heading">
     <h4 class="panel-title">
       <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" ng-click="secondpaneisopen=!secondpaneisopen>
         <i class="glyphicon" ng-class="{'glyphicon-chevron-up': secondpaneisopen, 'glyphicon-chevron-down': !secondpaneisopen}"></i> Collapsible Group Item #2
       </a>
     </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
     <div class="panel-body">
       Body
     </div>
    </div>
   </div>
 </div>
7个回答
4

如何使用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>

重要提示：确保将collapsed类添加到具有data-toggle="collapse"属性的元素，以使其平稳运行。否则，在元素的初始加载时，span元素在第一次旋转时不会按预期工作。

这是一个不错的技巧，可以避免创建新变量。但我面临的唯一问题是它会延迟渲染，所以[]会在显示glyphicon之前出现。 - Aamol
1
@Aamol，你需要确保在<head>标签中加载了bootstrap.css，并且将<script>标签放置在</body>闭合标签之前。这将确保在页面加载时可用glyphicons。也可以尝试使用ng-cloak和https://dev59.com/QWMl5IYBdhLWcg3wyJYe#18133519... - Aakash
4
这是我尝试过的，看起来可以运行。
在我的控制器中，我有：
$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>
3
我曾经想到的最简单的解决方案，且不需要使用任何控制器。
<div 
  class="fa fa-fw list-arrow" 
  ng-class="{'fa-angle-down': isClicked, 'fa-angle-right' : !isClicked}" 
  ng-click="isClicked = !isClicked">
</div>

你可以像我一样写类似的东西。
3
我建议你查看AngularUI团队的'UI Bootstrap'。它是一组“用纯AngularJS编写的Bootstrap组件”。
他们的网站上有一个例子，展示了他们的Accordion指令使用ng-class来切换chevron图标。
他们的指令还包括一个close-others属性，如果为真，则确保在任何时候只有一个面板处于打开状态。 http://angular-ui.github.io/bootstrap/ http://angular-ui.github.io/bootstrap/#/accordion 
<accordion close-others="true">
这让我找到了一个对于我们基于Foundation的用户来说同样有用的替代品。 - abettermap
2

我经过一些研究，发现可以使用这个方法，在打开面板时向panel-header添加open类。这个例子允许多个面板同时打开，并使用了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 = [];
1

您可以使用Bootstrap（已测试4+）的折叠功能和以下样式来切换按钮：

<style>
    [id^='particon'] {
      display: block !important;
    }

    [id^='particon']:after {
      font-family: 'Glyphicons Halflings';
      color: grey;
    }

    [id^='particon'].collapse:after {
      content: "\e081";
    }

    [id^='particon'].collapse.show:after {
      content: "\e082";
    }

    /*optional*/
    [id^='particon'].collapsing {
      transition: none;
    }
</style>

对于完全工作的片段；

https://js.do/code/changecollapseicon

0
经过一些研究，我找到了一种解决方法。
JS:
$scope.firstpaneisopen = false;
$scope.secondpaneisopen = false;

修改第一个面板上的ng-click：

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

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

我认为这不是一个优雅的解决方案，特别是如果我们有超过两个窗格，但它可以工作。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接