Question

在项目中，我使用Angularjs 1.3.6和Bootstrap 3.1.1。

我使用ng-repeat（带有一些过滤器）和ng-hide在两列上显示数组的内容：

<div class="first-col">
        <div class="formation-panel" ng-repeat="formation in formations | filter:formationType | filter:search | formationsAnnee:this" ng-hide="$index%2">
            @formation()
        </div>
</div>

<div class="second-col">
        <div class="formation-panel" ng-repeat="formation in formations | filter:formationType | filter:search | formationsAnnee:this" ng-hide="($index+1)%2">
            @formation()
        </div>
</div>

@formation()语法来自Play Framework。它呈现以下内容：

<div class="formation-panel-heading" data-toggle="collapse" href="#formation-body-{{formation.id}}">
          ...Heading...
</div>
<div class="formation-panel-body" id="formation-body-{{formation.id}}">
        ...Some content...
</div>

（我将折叠的类归因于Less mixin的标题）

两列中显示的元素是Bootstrap面板。我想对这些面板应用折叠效果：当我们点击标题时，主体必须折叠。它在第一列上运行良好，但在第二列时完全没有。

对我来说，没有任何意义。知道这个问题的原因吗？

Answer 1

我没有解决Angular ng-hide和Bootstrap折叠效果之间共存的问题，但我实现了使用ng-show呈现该功能：我影响了show属性，初始化为false，由ng-repeat显示的对象。标题变为：

<div class="formation-panel-heading" ng-click="formation.show=!formation.show">...</div>

身体：

<div class="formation-panel-body" ng-show="formation.show">

折叠效果不适用于ng-hide

1 个答案: