javascript - 使用 Angular 将列换行

Question

编辑以包含 Angular 代码(仅供说明)

我一直在尝试在 AngularJS 中找到在 n 列之后自动换行的方法，同时不影响索引。

<div class="row">
{{for (var i = 0; i < list.length; i++ )  {   }}
<div class="col-4">list[0].name</div>
{{  }  }}

下面是在 PHP 中的实现方式。

简而言之:

<div class="row">
<?php 

 $collection = array( 'item1', 
                      'item2',
                      'item3', 
                      'item4',
                      'item5',
 );

 for($i = 0; $i < count($collection); $i++ ) : ?>

    <div class="col-4">
       <?php echo $collection[$i] ?>
    </div>

<?php if(($i + 1) % 3 === 0) :?>

</div> <!-- close row -->
<div class="row"><!-- open new row -->

<?php endif ?>
<?php endfor ?>

</div> <!-- close final row -->

我知道它可以在 Controller 中完成并在链接函数中推回 DOM，但这看起来很糟糕。我确定我一定遗漏了一些东西，但有条件地在开始的 div 之前添加结束 div 对我来说很棘手。

附言我考虑过使用 Underscore.js 来做这个例子，但觉得这会更通用一些。

Answer 1

(转 self 上面的评论。)这是一个 CSS 问题，而不是 PHP 或 Angular 问题，尽管在这些问题中有解决方案。

由于您使用的是 flex-box 框架，因此需要将行设置为 flex-wrap: wrap(最好通过 CSS 文件)并将列定义为 33.33333% 宽；在 Ionic 中，表示 class='col-33'