在AngularJS

Question

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

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

以下注释代码段包含一些用于组合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的解决方案的角度html，但这似乎不是处理这种情况的最佳方法。

Answer 1

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