How to toggle bootstrap collapse from angularjs

Question

I am trying to toggle bootstrap collapse programmatically which is

 <div class="panel-heading" role="tab" id="headingStores">
                                <h4 class="panel-title">
                                    <span class="collapsed" id="StoresPanel" role="button" data-toggle="collapse" data-parent="#filter-field-container" href="#filterStores" aria-expanded="false" aria-controls="filterStores">
                                        <i class="fa fa-chevron-circle-right"></i><i class="fa fa-chevron-circle-down"></i>  Stores
                                        <span ng-if="showStore" class="pull-right">{{countStore}}</span>
                                    </span>
                                </h4>
                            </div>

My angular code is

    var domElement = document.getElementById('StoresPanel');

    angular.element(domElement).collapse('show');

But collapse('show') is not invoking the toggle functionality. Kindly help !

why are you using triggerHandler('click') instead of ng-click? — CozyAzure
– CozyAzure, Commented Aug 1, 2016 at 2:53
You've tagged angular-ui-bootstrap, did you take a look on it? angular-ui.github.io/bootstrap/#/collapse — Icycool
– Icycool, Commented Aug 1, 2016 at 3:02
Yes I have. But again this is using ng-click, I just want to toggle(show and hide) from angularjs code. — Khurram W. Malik
– Khurram W. Malik, Commented Aug 1, 2016 at 3:07
Angular-ui-bootstrap is a rewrite of bootstrap for angular which is in angular way and also avoids jQuery dependancy. If you use angular-ui then do things angular way or don't use it! Also if your question is not related to angular-ui remove the tag from question. — sabithpocker
– sabithpocker, Commented Aug 1, 2016 at 3:43

bob · Accepted Answer · 2017-01-26 03:05:02Z

3

A bit late but, I am using bootstrap's collapse component (not angular ui bootstrap) and wanted to control it from my angular1 controller, then you can do like (jQuery would need to be loaded):

 const el = document.querySelector(target);
 if (!angular.element(el).hasClass('in')) { // hidden
     $(el).collapse('show');
 }

answered Jan 26, 2017 at 3:05

bob

2,7641 gold badge32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to toggle bootstrap collapse from angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related