在AngularJS中将两个div组合在一起答案

【问题标题】：Combine two divs together in AngularJS在AngularJS中将两个div组合在一起
【发布时间】：2016-03-21 05:39:53
【问题描述】：

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

为了使这篇文章对其他查看者更普遍有用，让我们将这种情况视为分离和组合两个圆角边框 div。所以，我们有两个矩形 div，它们之间有圆角边框和边距。这些 div 的数量是任意的，这意味着可能有 2 个，可能有 7 个，但只有一对应该组合在一起（在 7 个的情况下，3 个单独的对可以与其配对的 div 组合和分离，剩下一个出）。

下面的注释代码 sn-p 有一些用于组合 css 的 ng-class 信息：

<!-- <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，因此欢迎使用任何使用它的解决方案。我也欢迎基于指令的解决方案。我基本上正在寻找处理这种情况的最佳实践方法。我已经尝试过仅基于 ng-class 的 Angular html 解决方案，但这似乎不是处理这种情况的最佳方法。

【问题讨论】：

提供代码，plunker

标签： javascript jquery angularjs angularjs-directive ng-animate

【解决方案1】：

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

【讨论】：

这是我一直在尝试的方法，但是由于我已经将 ng-class 用于其他几件事，所以我想我会采取另一种方法。我现在正在尝试这种方法。