Angularjs UI崩潰在ngRepeat

我想在ngRepeat中嵌入一些可摺疊的面板。這是我有：Angularjs UI崩潰在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無法正常工作。或者我做錯了什麼？

感謝

來源

2014-02-18 Enrico

請創建一個相同的小提琴。請解釋ng-click =「element.isCollapsed！= element.isCollapsed」您在Click事件中檢查同一元素 – V31

嗨V31，感謝您的評論。我創建了一個小提琴http://jsfiddle.net/nZ9Nx/7/並更正了代碼。 – Enrico

請檢查更新的小提琴：http://jsfiddle.net/nZ9Nx/9/

我所創建的應用程序和用戶界面注入，引導它有崩潰的工作。

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

來源

2014-02-18 12:35:14 V31

ui-bootstrap有什麼特別之處？ – FutuToad

它是一個庫，它定義了可用的引導javascript組件的指令。這有助於讓javacscript組件（外部角度範圍）位於角度範圍內。 – V31

right我看到了，我猜他們只能用ie9 :( – FutuToad

問題是

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

它在例如硬編碼。替換...

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

來源

2014-09-02 16:28:06 nathanengineer

嘿如果摺疊面板不在ng-repeat範圍內，那麼如何觸發collapse –

Angularjs UI崩潰在ngRepeat

回答

相關問題