ngRepeat의 Angularjs UI collapse

Question

ngRepeat에 접을 수있는 패널을 포함하려고합니다. 내가 버튼을 클릭하면

이제

<div class="panel panel-default" ng-repeat="element in elements"> 
<div class="panel-heading"> 
    {{element.name}} 
    <button value="Collapse" ng-click="element.isCollapsed != element.isCollapsed"></button> 
</div> 
<div class="panel-body" collapse="element.isCollapsed"> 
    Content 
</div> 
</div> 

, 붕괴가 작동하지 않습니다 이 내가 가진 것입니다. 설명서에서 리피터가 모든 element에 대한 범위를 생성한다는 것을 알고 있습니다. 그리고 패널 본체의 collapse 속성은 동일한 범위를 가져야합니다. 맞습니까? collapse 지시문의 scope.$watch이 제대로 작동하지 않는 것으로 보입니다. 아니면 뭔가 잘못하고있는 것일까 요? 나는 응용 프로그램을 생성 및 붕괴의 작업을하는 데에 UI - 부트 스트랩을 주입 한 http://jsfiddle.net/nZ9Nx/9/

:

감사

Answer 1

업데이트 된 바이올린을 확인하시기 바랍니다. 그것은 예에서 하드 코드 된 것

<div class="panel-heading" toggle target="collapseOne"> 

angular.module('test', ['ui.bootstrap']); 

Answer 2

문제입니다.

<div class="panel-heading" toggle target="collapse{{ $index + 1 }}"> 

는 또한이 태그 여기

<div id="collapse{{ $index + 1 }}" toggleable active-class="in" exclusion-group="accordion1" default="active" class="panel-collapse collapse"> 

업데이트와 함께 ... 바꾸기 같은위한 바이올린을 만드십시오 전체 예를

<div ng-repeat="item in awesomeThings"> 
    <div class="panel panel-default"> 
     <div class="panel-heading" toggle target="collapse{{ $index + 1 }}"> 
      <h4 class="panel-title"> 
       {{ item }} 
      </h4> 
     </div> 
     <div id="collapse{{ $index + 1 }}" toggleable active-class="in" exclusion-group="accordion1" default="active" class="panel-collapse collapse"> 
      <div class="panel-body"> 
       <!-- ... --> 
      </div> 
     </div> 
    </div> 
</div>