ng-click on accordion panel header

2019-08-09 15:16发布

站内问答 / 移动开发
1726 3 5

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>

3条回答
三岁会撩人
2楼-- · 2019-08-09 15:24

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>
查看更多
0人赞 添加讨论(0) 举报
你好瞎i
3楼-- · 2019-08-09 15:26 

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>

查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
4楼-- · 2019-08-09 15:28

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)