ng-click on accordion panel header

问题

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>

回答1:

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>

回答2:

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>

回答3:

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>

来源：https://stackoverflow.com/questions/34917312/ng-click-on-accordion-panel-header

标签

angularjs

angularjs-ng-click