Bootstrap 列大小取决于 ng-repeat 项目

Question

我正在尝试使用 ng-repeat 图像填充我的网站。我想做一些事情，如果图像中只有一个图像，它将得到 1 整行（col-xs-12），如果有 2 个图像，它们将加载为 col-xs-6，向上最多 6 张图片（每张图片 col-xs-2）。

还能这样玩吗？我想将它们列为 ul>li>img + 描述。

干杯！

Answer 1

是的，实际上可以使用 ng-class directive of Angular。

你可以做的是用你得到的图像数量调用一个函数，这将 return 相应的 Bootstrap class。

Answer 2

你可以这样写

  <ul>
       <li ng-repeat="image in images" ng-class="{'col-xs-12':images.length== 1 ,  }">
       </li>

  </ul>

Answer 3

你也可以这样做:

<ul>
     <li ng-repeat="image in images" class="col-xs-{{Math.floor(12 / images.length)}}">
     </li>
</ul>

这样，列的宽度将自动设置。问题是如果你有超过 12 张图片，宽度将为 0.

Bootstrap col size depending on ng-repeat items