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

回答

相关问题