当显示另一个div时，按下一系列div

Question

当有人点击一个框时，我试图这样做：

看起来很简单，如果我将灰色div放在ng-repeat内，当用户点击一个框时，就会显示新的div。

<div ng-repeat="friend in friends" ng-click...>
 <div>
   {{friend}}
 </div>
 <div collapse="expand">
  some content
 </div>
</div>

但是，如果我不想重复灰色div怎么办？ （让我们说它是一堆html，每个元素都没有必要重复。）

所以，我有 this plunker ，其中灰色div在ng-repeat之外。

是否有可能使用纯CSS 或角度或javascript中的某些技巧来执行您在图像中看到的内容？

我听说我可以使用jQuery来注入html，但也许可以以更清晰的方式存在。

考虑：

• 一行可以有一个n个项目。

我尝试了什么

• 将灰色div放在position relative，但这不会压低其他div。

Answer 1

首先，除非您更改标记，否则您的任务无法实现。结果应该是这样的。

<div class="row">
  <div class="col-md-4">
    Age
  </div>
  <div class="col-md-4">
    Age
  </div>
</div>
<div class="row">
  <div class="col-md-4">
    Age
  </div>
  <div class="col-md-4">
    Age
  </div>
</div>

为此你需要使用自定义过滤器。我从这里拿走了它 how to split the ng-repeat data with three columns using bootstrap

由于您使用jQuery，因此您可以轻松地操作元素。你可以让你折叠div并将它附加到每一行。

您修改的工作计划员在这里 http://plnkr.co/edit/WUGDcUsxqRqrrmK4I9Lh?p=preview