在AngularJS中将两个div结合在一起

Question

我有一个用jQuery编写的应用程序，目前正在AngularJS中重写。 我遇到的情况是，可以通过引导按钮切换将两张单人床（基于div / css）合并为一张特大床，反之亦然。

为了使此帖子对其他查看者更加通用，让我们考虑一下这种情况，即将两个圆形的div分隔并合并。 因此，我们有两个矩形div，它们之间有圆角边框和边距。 这些div的数量是任意的，这意味着可以有2个，可以有7个，但只能将一对组合在一起（在7个的情况下，可以将3对独立的对与它们的配对div组合并分开，剩下一个出来）。

以下注释代码段具有一些用于组合css的ng级信息：

<!-- <div data-ng-class="{'bed combinableAttachedBed':bed.bedType='Twin-Combinable'}" ng-class-odd="'leftBed'" ng-class-even="'rightBed'" > </div> -->

这是一个小矮人： http ://plnkr.co/edit/4JO0v8thqABkH4gy7di0?p=preview

处理这种情况的最干净的角度方法是什么？

---

注意：我已经在使用ng-animate，因此欢迎使用该解决方案。 我也欢迎基于指令的解决方案。 我基本上是在寻找解决这种情况的最佳实践方法。 我已经尝试过基于Angular的仅基于ng类的解决方案，但这似乎并不是解决这种情况的最佳方法。

Answer 1

听起来最好的解决方案将涉及ng-class和一些CSS。 您可以使用CSS轻松地从合并的“床”的较近侧移除边框和边距，这样，您的角度代码就不会因显示方式而变得复杂。