Angularjs ng-repeat列响应

Question

我在大型设备中将ng-repeat分为最多2列。在这个元素中有一个按钮。单击时，元素可以“扩展”并占据页面的整个宽度。问题是我打开了右边的一个元素，这个元素在它左边的元素下面。正确的行为是当我打开左侧的元素时。更确切地说，扩展的元素下的元素应该总是正确排列在2列中。这是我的例子：

http://plnkr.co/edit/DR3wsVqkW3b4ZYaFUAZz?p=preview

部分代码：

<div>
      <div class="row">
        <div ng-repeat-start="product in obj.products" class="clearfix" ng-if="$index % 2 == 0"></div>
        <div ng-repeat-end class="col-md-0 col-sd-6 col-lg-6 bg-danger" data-ng-class="{'openDiv': product.openIs == true}" style="cursor: pointer, z-index: 1">
          <h2>af {{product.title}}</h2>
          <div>
            <button ng-click="obj.doSomething(product)">Click to open</button>
          </div>
          <div ng-if="product.openIs == true">
              <p>This is inside</p>
          </div>
        </div>
      </div>
    </div>

的CSS：

<style>
      .openDiv {
        width:100%!important;
      }
    </style>

和js：

var app = angular.module（'plunker'，[]）;

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.obj = {
     products: [
      { title: 'text text text text text text text text text text text text text text 1' },
      { title: 'text text text2' },
      { title: 'text text text text text1' },
      { title: 'text text text2' },
      { title: 'text 1' },
      { title: 'text te text text text text text text text text text text xt2' },
      { title: 'text 1' },
      { title: 'text 2' },
      { title: 'text  text text text1' },
      { title: 'text 2' },
      { title: 'text text text textv text text text1' },
      { title: 'text 2' }
    ],

    openIs: false,
    doSomething: function(obj) {
       obj.openIs =! obj.openIs;
    }
  }

});

希望有人可以帮助我。感谢

编辑：更清楚：

关闭所有元素的情况如下：

这是我在左栏上展开的时候。正如您所看到的，它会在下方创建一个空白区域（这是一个问题）

这是我在右栏打开一个：同样的问题：