Question

我有一系列产品。我想按行显示它们，每行4个产品。现在我的代码是

<div ng-repeat="product in products" class="col-md-3">
    <p> {{product.name}} </p>
    <p> {{product.price}} </p>
</div>

但是，这显示不正确。我试图将行与ng-if合并，但这就像我来的那样接近：

<div ng-repeat="product in products">
    <div ng-if="$index %4 == 0" class="row">
        <div class="col-md-3">
            (content)
        </div>
    </div>
    <div ng-if="$index %4 != 0" class="col-md-3">
        (content)
    </div>
</div>

我想我知道为什么以上不起作用：如果index %4 != 0那么创建的列实际上并没有放在之前创建的行中。

有一种有角度的方法吗？我需要自定义指令吗？注意：我已经管理了一个不使用angular指令的解决方案，但它看起来并不干净，所以如果可能的话，我想“有角度地”进行。

Answer 1

你应该可以使用你的第一种方法，这是我用js小提琴连接的html：

<div ng-app="app">
     <div ng-controller="ParentCtrl">
         <div class="container">
             <div class="row">
                 <div data-ng-repeat="option in options" class="col-md-3">
                     {{ option }}
                 </div>
             </div>
         </div>
     </div>
</div>

小提琴：http://jsfiddle.net/ubexop9p/

如果你的显示器太小，你将不得不玩框架尺寸，但我能够做到你想要的。

Answer 2

您是否已将其包裹在container或container-fluid中？我相信网格系统需要工作。

<div class="container">
   <div class="col-md-3">Col 1</div>
   <div class="col-md-3">Col 2</div>
   <div class="col-md-3">Col 3</div>
   <div class="col-md-3">Col 4</div>
   <div class="col-md-3">Col 5</div>
</div>

Answer 3

事实证明，我在列中放入的内容存在问题，我发布的代码确实可以正常工作。

使用ng-repeat创建引导网格

3 个答案: