1

I have been working on angularjs uib-accordion , I am able to make it functional, now when I click on panel title it expands that's fine, but what I am trying is when I click anywhere on panel heading it should also expand. Need some suggestion on it.

<uib-accordion>
    <uib-accordion-group style="border-radius:0px !important; margin:10px;"ng-repeat="filter in filterGroup" heading="{{filter.label}}">
        Some code
    </uib-accordion-group>
</uib-accordion>
sampu
  • 53
  • 1
  • 9

3 Answers3

2

If you don't mind adding a property to the filter, you can simply have the is-open attribute be assigned to that property and toggle it on ng-click (as shown below). If you don't want the property to be assigned to the filter object, then there are other methods (for example, push the filter into an isOpen array, and is-open="isOpen.indexOf(filter)>-1")

<uib-accordion>
    <uib-accordion-group ng-repeat="filter in filterGroup" 
          heading="{{filter.label}}" 
          ng-click="filter.isOpen==!filter.isOpen" 
          is-open="filter.isOpen">
        ...
     </uib-accordion-group>
</uib-accordion>
Beartums
  • 1,340
  • 1
  • 10
  • 15
1

Thanks for suggestions this modifications fixed my problem 

<uib-accordion close-others="oneAtATime">
    <uib-accordion-group is-open="isopen"  ng-repeat="filter in filterGroup">
        <uib-accordion-heading ng-click="isopen=!isopen">
            <div >{{filter.label}} <i class="pull-right glyphicon"
                ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
            </div>
        </uib-accordion-heading>
            Some code
    </uib-accordion-group>
</uib-accordion>
nkchandra
  • 5,585
  • 2
  • 30
  • 45
sampu
  • 53
  • 1
  • 9
0

angular.module('ui.bootstrap.demo', [ 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = false;
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="AccordionDemoCtrl">
  <uib-accordion close-others="oneAtATime">
    <uib-accordion-group is-open="status.open"  ng-click="status.open = !status.open">
      <uib-accordion-heading>
        I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
      </uib-accordion-heading>
      This is just some content to illustrate fancy headings.
    </uib-accordion-group>
  </uib-accordion>
</div>
  </body>
</html>
Keval Bhatt
  • 6,224
  • 2
  • 24
  • 40
  • The problem here is that clicking anywhere inside of the accordion also triggers the click event, so when you have a text box inside of it, the user can't actually use it properly. – Grungondola Mar 24 '16 at 17:48
  • @Grungondola this issue is called as event bubbling see my answer you will get know how to solve the problem http://stackoverflow.com/questions/5963669/whats-the-difference-between-event-stoppropagation-and-event-preventdefault/30475572#30475572 – Keval Bhatt Mar 24 '16 at 17:53
  • We ended up modifying the standard template for uib-accordion-heading to grab the click event. – Grungondola Mar 25 '16 at 12:13