Angularjs 아코디언 ng 패널 헤더를 클릭합니다.

Angularjs 아코디언 ng 패널 헤더를 클릭합니다.

각진 상태JS UI 부트스트랩 패널 헤딩을 클릭하면 활성화가 열려 있지만 방법을 찾을 수 없습니다.이 버전에서는 링크를 클릭했을 경우에만 활성화됩니다.

내가 시도한 건 이거야.

<accordion-group is-open="isopen">
    <accordion-heading ng-click="isopen=!isopen">
        I can have markup, too! 
        <i class="pull-right glyphicon" 
           ng-class="{'glyphicon-chevron-down': isopen, 'glyphicon-chevron-right': !isopen}"></i>
    </accordion-heading>
    This is just some content to illustrate fancy headings.
</accordion-group>

ng-click="isopen=!isopen"

이 링크는 제가 플런커에서 시도했던 링크입니다.

AngularJS UI 부트스트랩

잘 부탁드립니다.

편집: 더 나은 솔루션은 이전하는 것입니다.ng-click="isopen=!isopen"에게accordion-group요소.이렇게 하면 패널 머리글의 가장자리를 포함하여 아무 곳이나 클릭하면서 패널이 열리거나 닫힙니다.

<accordion close-others="oneAtATime">
    <accordion-group is-open="isopen" ng-click="isopen=!isopen">
        <accordion-heading >
           I can have markup, too! 
           <i class="pull-right glyphicon" 
              ng-class="{'glyphicon-   chevron-down': isopen, 'glyphicon-chevron-right': !isopen}">
           </i>
        </accordion-heading>
        This is just some content to illustrate fancy headings.
    </accordion-group>
</accordion>

편집 종료

내용을 동봉하다<accordion-heading>에 있어서<div>

<accordion close-others="oneAtATime">
    <accordion-group is-open="isopen" >
        <accordion-heading ng-click="isopen=!isopen">
           <div>
            I can have markup, too! 
           <i class="pull-right glyphicon" 
              ng-class="{'glyphicon-   chevron-down': isopen, 'glyphicon-chevron-right': !isopen}">
           </i>
           </div>
       </accordion-heading>
       This is just some content to illustrate fancy headings.
   </accordion-group>
</accordion>

매우 심플한 CSS 기반 솔루션:

    .panel-heading {
        padding: 0;
    }

    .panel-title a {
        display: block;
        padding: 10px 15px;
    }

다만, 복잡한 헤딩을 사용하고 있는 것은 아닙니다.아래와 같은 헤딩 속성이기 때문에, 위의 예에서는 테스트하지 않았습니다.

<uib-accordion-group heading="Details" class="form-horizontal" is-open="true">

당신이 해야 할 일은 당신이 해야 할 일은accordion-group.html템플릿에 의해 헤더가 수신되도록 합니다.ng-click이벤트입니다.

<div class="panel {{panelClass || 'panel-default'}}">
  <div class="abc panel-heading" ng-keypress="toggleOpen($event)" ng-click="toggleOpen($event)" >
    <h4 class="panel-title">
      <a href tabindex="0" class="accordion-toggle" accordion-transclude="heading"><span ng-class="{'text-muted': isDisabled}">{{heading}}</span></a>
    </h4>
  </div>
  <div class="panel-collapse collapse" collapse="!isOpen">
      <div class="panel-body" ng-transclude></div>
  </div>
</div>

그런 다음 코드 내에서 이를 template-url로 지정합니다.accordion-group

<accordion-group heading="Dynamic Body Content" template-url="accordion-group.html">

예: http://plnkr.co/edit/EXUgyNi8hrqQbh5maJUx?p=preview

언급URL : https://stackoverflow.com/questions/23135832/angularjs-accordion-ng-click-on-panel-header