引导列大小取决于 ng 重复项目

Bootstrap col size depending on ng-repeat items

本文关键字：ng 项目 取决于      更新时间：2023-09-26

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

）。

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

干杯！

是的，实际上可以使用 Angular 的 ng-class 指令。

您可以做的是调用一个函数，其中包含您获得的图像数量，该函数将返回相应的Bootstrap class 。

你可以这样写

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

你也可以这样做：

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

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

相关文章：