Question

我在使用AngularJS的Bootstrap面板时遇到了问题。我无法正确对齐我的面板。我想将我的面板显示为2列。

我有以下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>

基本情况：比方说，我有3个项目。第一个项目将显示在第一行中。 - item1：row0 / col0 - item2：row0 / col1 最后一项应显示在第二行和第一列中 - item3：row1 / col0

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

我的用例：我的面板内容可能彼此不同。因此，当我的第一个面板内容比其他内容更大时，第三个项目将转到col1。 - item3：row1 / col1

它留下了一个很大的空间然后如果我想要添加第四个项目......那就变得丑陋了:(

我创建了一个演示该问题的演示：http://plnkr.co/edit/TZDck5b9G9Ap32KlPk4q?p=preview

Answer 1

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

TextBox

缺点当然是您要复制列的标记（显示实际面板的标记），如果您为此部件创建指令，则可以避免这种情况。我得到Exlord的解决方案更简单，但是我觉得这更接近Angular / Bootstrap方式，因为否则你有效地覆盖了Bootstrap的行系统，强迫＆＃34;要在多行中断行的行（使用clear：right）。

请在此处查看更新的plunkr：http://plnkr.co/edit/7KMZdzcpR7Ff2D6pExVB?p=preview

Answer 2

<div ng-repeat="..." ng-class="{clear_right:$odd}">
    //your panel content here   
</div>

.clear_right{clear:right;}
.clear_right:after{content:" ";display:block;}

Answer 3

@Christina：很好的解决方案，但你失去了范围。在我的复杂模板html中，我需要访问父作用域。我将指令更改为构建从父级继承的新范围，请参阅plunker fork http://plnkr.co/edit/CCwbnZCE7e8ej2fFBi2e?p=preview

app.directive('panelContent', function(){
 return {
  restrict: 'E',
  scope: true,
  templateUrl: 'panel-content.html',
  link: function(scope, element, attributes){
    scope.item = scope.$eval(attributes["item"]);
  }
 };
})

更新03.06.15：

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

现在我用

解决了这个问题

   <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>

AngularJS / Bootstrap CSS：错误的面板在ng-repeat内部对齐成2列

3 个答案: