Angularjs 手风琴 ng-单击面板标题 [英] Angularjs accordion ng-click on panel-header

问题描述

在 AngularJS UI Bootstrap 中，我想在点击 panel-heading 时激活 isopen，但我找不到方法.在此版本中，只有单击链接才能激活.

这是我尝试过的；

<accordion-heading ng-click="isopen=!isopen">我也可以有标记！<i class="右拉字形"ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i></accordion-heading>这只是一些说明花哨标题的内容.</accordion-group>

ng-click="isopen=!isopen"

这是我在 Plunker 上试过的链接

AngularJS UI 引导程序

提前致谢..

解决方案

更好的解决方案是将 ng-click="isopen=!isopen" 移动到 accordion-group 元素.这样可以打开/关闭面板，点击面板标题上的任意位置，包括边缘.

<accordion-group is-open="isopen" ng-click="isopen=!isopen"><手风琴式标题>我也可以有标记！<i class="右拉字形"ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i></accordion-heading>这只是一些说明花哨标题的内容.</accordion-group></手风琴>

结束编辑

将的内容放在

<accordion-group is-open="isopen" ><accordion-heading ng-click="isopen=!isopen"><div>我也可以有标记！<i class="右拉字形"ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>

</accordion-heading>这只是一些说明花哨标题的内容.</accordion-group></手风琴>

In AngularJS UI Bootstrap I want to activate isopen when panel-heading is clicked, but I couldn't find a way. In this version is activated only if you click the link.

Here's what I tried;

<accordion-group is-open="isopen">
    <accordion-heading ng-click="isopen=!isopen">
        I can have markup, too! 
        <i class="pull-right glyphicon" 
           ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
    </accordion-heading>
    This is just some content to illustrate fancy headings.
</accordion-group>

ng-click="isopen=!isopen"

This is the link I tried on Plunker

AngularJS UI Bootstrap

Thanks in advance..

解决方案

EDIT: A better solution is to move ng-click="isopen=!isopen" to the accordion-group element. This way the panel is opened/closed clicking anywhere on the panel-heading, including the edges.

<accordion close-others="oneAtATime">
    <accordion-group is-open="isopen" ng-click="isopen=!isopen">
        <accordion-heading >
           I can have markup, too! 
           <i class="pull-right glyphicon" 
              ng-class="{'glyphicon-   chevron-down': isopen, 'glyphicon-chevron-right': !isopen}">
           </i>
        </accordion-heading>
        This is just some content to illustrate fancy headings.
    </accordion-group>
</accordion>

END EDIT

enclose the content of <accordion-heading> in a <div>

<accordion close-others="oneAtATime">
    <accordion-group is-open="isopen" >
        <accordion-heading ng-click="isopen=!isopen">
           <div>
            I can have markup, too! 
           <i class="pull-right glyphicon" 
              ng-class="{'glyphicon-   chevron-down': isopen, 'glyphicon-chevron-right': !isopen}">
           </i>
           </div>
       </accordion-heading>
       This is just some content to illustrate fancy headings.
   </accordion-group>
</accordion>

这篇关于Angularjs 手风琴 ng-单击面板标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！