AngularJS/Bootstrap CSS：错误的面板在ng repeat中对齐为2列

我对AngularJS的引导面板有问题。 我无法正确对齐面板。我想将面板显示为两列

我有以下HTML代码：

<div class="row">
  <div class="col-lg-3 col-sm-3 col-xs-3">
    <span>Some stuffs</span>
  </div>
  <div class="col-lg-9 col-sm-9 col-xs-9">
    <div class="row">
       <div class="col-lg-6 col-sm-6 col-xs-6"
            ng-repeat="i in items">
         <div  class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">{{i.title}}</h3>
          </div>
          <div class="panel-body">
            {{i.content}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

一些东西
{{i.title}}
{{i.content}}

基本情况： 比如说，我有3项。 前两项将显示在第一行中。 -项目1：行0/col0 -项目2：行0/col1 最后一项应显示在第二行和第一列 -项目3：第1行/第0列

当面板的高度相同时，它可以正常工作

我的用例： 我的面板内容可以彼此不同。 因此，当我的第一个面板内容比其他面板内容大时，第三个项目进入col1。 -项目3：第1行/第1列

它留下了一个很大的空间，如果我想添加第四项…它会变得很难看：(

我已经创建了一个演示，展示了这个问题：

//您的面板内容在这里
.clear_right{clear:right；}
.clear_right:在{content:：；display:block；}

我能想到的正确显示第3个div（无论大小）的唯一解决方案是，在前2个div中使用一行，在下2个div中使用另一行（依此类推）。您可以通过将ng repeat迭代放在row div之外，并在迭代在add元素上时有条件地分配row类来实现这一点

<div ng-repeat="i in items">
    <div ng-if="$even" class="row">
      <div class="col-lg-6 col-sm-6 col-xs-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">{{i.title}}</h3>
          </div>
          <div class="panel-body">
            {{i.content}}
          </div>
        </div>
      </div>
      <div class="col-lg-6 col-sm-6 col-xs-6" ng-if="items[$index + 1]">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">{{items[$index + 1].title}}</h3>
          </div>
          <div class="panel-body">
            {{items[$index + 1].content}}
          </div>
        </div>
      </div>
    </div>
</div>

{{i.title}}
{{i.content}}
{{items[$index+1].title}
{{items[$index+1].content}

当然，缺点是复制列的标记（显示实际窗格的标记），如果您为该部分创建一个指令，这是可以避免的。我知道Exlord的解决方案更简单，但是我觉得这更接近角度/引导方式，因为否则您将通过“强制”行的列在多行中打断（使用clear:right）来有效覆盖引导的行系统

---

请参见此处更新的plunkr:

@Christina:很好的解决方案，但您丢失了作用域。在我的复杂模板html中，我需要访问父作用域。 我将指令更改为构建从父级继承的新范围，请参见plunker fork

更新03.06.15：

如果添加或删除项，{$index+1}}解决方案将导致问题。在这种情况下，anguluar在数据绑定方面遇到问题，并且不会将视图更新到修改后的集合

现在我用一个简单的方法解决了这个问题

   <div ng-if="$even" style="clear: both;"></div> 

在ng重复块中

 <div ng-repeat="item in myItems">
      <div ng-if="$even" style="clear: both;"></div>
      <item-content /> <!-- directive that adds the content for each item ( or direct html if you want)-->
 </div>

这不是gana的工作，现在每个列都在2个div中，没有float@Exlord在阅读了你的评论后，我明白了你的观点，但奇怪的是，它实际上正在发挥作用。我正在审查它，看看是否能找到更好的方法来实现我的建议。如果你对所有列的高度都相同没有异议，那么我建议你这样做使用此指令：。它将所有容器的高度设置为相同（最大值）。谢谢！它工作正常

   <div ng-if="$even" style="clear: both;"></div> 

 <div ng-repeat="item in myItems">
      <div ng-if="$even" style="clear: both;"></div>
      <item-content /> <!-- directive that adds the content for each item ( or direct html if you want)-->
 </div>