Question

我一直在研究angularjs uib-accordion，我能够使它正常运行，现在当我点击面板标题时，它扩展了这很好，但我正在尝试的是当我点击面板标题上的任何地方它也应该扩展。需要一些建议。

<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>

Answer 1

如果您不介意向过滤器添加属性，只需将is-open属性分配给该属性，然后在ng-click上切换它（如下所示）。如果您不希望将属性分配给过滤器对象，则还有其他方法（例如，将过滤器推入isOpen数组，并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>

Answer 2

感谢您提出建议，这些修改解决了我的问题

<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>

Answer 3

＆＃13;

angular.module('ui.bootstrap.demo', [ 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = false;
});

＆＃13;

<!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>

＆＃13;

点击手风琴面板标题

3 个答案: