Javascript 角度：如何使用引导和ng中继器生成图像库

我正在学习angular，并试图了解如何使用ng repeater生成类似图像库的输出

演示截图url

看到这张图，就可以了解我想要的是什么样的输出

下面是示例html，我们可以通过它生成图像库

CSS html

大字标题
我爱你，我爱你



大字标题
我爱你，我爱你



大字标题
我爱你，我爱你



大字标题
我爱你，我爱你

html取自

每行将有5个图像。现在告诉我如何使用引导css和angular ng repeater实现相同的效果。如果可能的话，请给我一些示例代码，其中可以使用bootstrap和ng repeater开发图库。谢谢

编辑 假设发布一个示例代码

var app=angular.module('imggallery',[]);
app.controller('imageCtrl',function($scope){
    $scope.img=[
        {headline:'Headline1',source:'images/table.jpg'},
        {headline:'Headline2',source:'images/paper.jpg'},
        {headline:'Headline3',source:'images/computer.jpg'},
        {headline:'Headline4',source:'images/ac.jpg'},
        {headline:'Headline5',source:'images/sofa.jpg'}
    ];
});


<div  ng-repeat="x in img">
     <img ng-src="{{x.source}}" >
 </div>`

var-app=angular.module（'imggallery'，[]）；
应用程序控制器（'imageCtrl'，函数（$scope）{
$scope.img=[
{标题：'Headline1'，来源：'images/table.jpg'}，
{标题：'Headline2'，来源：'images/paper.jpg'}，
{标题：'Headline3'，来源：'images/computer.jpg'}，
{标题：'Headline4'，来源：'images/ac.jpg'}，
{标题：'Headline5'，来源：'images/sofa.jpg'}
];
});
`

假设img阵列沿图像路径有200个数据。我只是不明白如何使用ng repeat来使用普通html和css或使用引导程序在一行中只显示五个图像

所以我想寻求一些帮助。谢谢诸如此类的事

angular.module（'myApp'，[]）.controller（'myCtrl'，function（$scope）{
$scope.images=[”https://placeholdit.imgix.net/~text？txtsize=28&txt=300%C3%97300&w=300&h=300“https://placeholdit.imgix.net/~text？txtsize=28&txt=300%C3%97300&w=300&h=300“https://placeholdit.imgix.net/~text？txtsize=28&txt=300%C3%97300&w=300&h=300“https://placeholdit.imgix.net/~text？txtsize=28&txt=300%C3%97300&w=300&h=300“，"https://placeholdit.imgix.net/~text？txtsize=28&txt=300%C3%97300&w=300&h=300“https://placeholdit.imgix.net/~text？txtsize=28&txt=300%C3%97300&w=300&h=300“https://placeholdit.imgix.net/~text？txtsize=28&txt=300%C3%97300&w=300&h=300“https://placeholdit.imgix.net/~text？txtsize=28&txt=300%C3%97300&w=300&h=300“]；
})；

*{
填充：0；
保证金：0；
框大小：边框框；
}
李{
显示：内联块；
宽度：20%；
填充：10px；
}
李英明{
宽度：100%；
}

类似这样的东西

angular.module（'myApp'，[]）.controller（'myCtrl'，function（$scope）{
$scope.images=[”https://placeholdit.imgix.net/~text？txtsize=28&txt=300%C3%97300&w=300&h=300“https://placeholdit.imgix.net/~text？txtsize=28&txt=300%C3%97300&w=300&h=300“https://placeholdit.imgix.net/~text？txtsize=28&txt=300%C3%97300&w=300&h=300“https://placeholdit.imgix.net/~text？txtsize=28&txt=300%C3%97300&w=300&h=300“https://placeholdit.imgix.net/~text？txtsize=28&txt=300%C3%97300&w=300&h=300“https://placeholdit.imgix.net/~text？txtsize=28&txt=300%C3%97300&w=300&h=300“https://placeholdit.imgix.net/~text？txtsize=28&txt=300%C3%97300&w=300&h=300“https://placeholdit.imgix.net/~text？txtsize=28&txt=300%C3%97300&w=300&h=300“]；
})；

*{
填充：0；
保证金：0；
框大小：边框框；
}
李{
显示：内联块；
宽度：20%；
填充：10px；
}
李英明{
宽度：100%；
}

如果要使用引导实现此目的，可以使用

ngClass

每隔五个重复元素应用一个类：

col-xs-offset-1

此类在元素的左侧创建1列的偏移量

---

看看我是如何使用它的。

如果您想使用引导实现这一点，可以使用

ngClass

每隔五个重复元素应用一个类：

col-xs-offset-1

此类在元素的左侧创建1列的偏移量

---

看看我是如何使用它的。

ng repeat

需要重复数据，将所有图像的

src

存储到

数组中，然后重复它。我是角度方面的新手，因此无法编写测试代码，因为缺少对它的命令。你能提供一些示例代码吗？我更新了我的帖子。请查看并提出你的建议。另一个nice链接
ng repeat
需要重复数据，将所有图像的
src
存储到
array
中，然后重复它。我是角度方面的新手，因此无法编写测试代码，因为缺少对它的命令。你能不能提供一些示例代码。我更新了我的帖子。请查看并随你的建议一起提交。另一个不错的链接我只是在你的代码中找不到任何逻辑，每行显示5个图像。告诉我你使用了什么逻辑。感谢他可能不在乎，但你的示例中没有使用引导，正如他所要求的那样。你可以发布另一个示例代码，其中每个图像将显示在每个div中，并且你将使用引导css显示5个div吗在每一行中，thanks@JeanJacques我看过阿披舍克的代码，但没有发现任何限制5幅图像在一行中显示的相关内容。如果你在他的代码中找到任何内容，那么告诉我每行显示的是哪一个区域的5幅图像？我使用的是
宽度：20%；
到
li
它将
ul
分为5幅
li
，b因为bootstrap没有这种网格。我只是在你的代码中找不到任何逻辑，每行显示5个图像。告诉我你使用了什么逻辑。感谢他可能不在乎，但你没有在你的示例中使用bootstrap，正如他所要求的那样。你可以发布另一个示例代码，在每个di中显示每个图像吗v，其中您将使用引导css在每行中显示五个div，thanks@JeanJacqu
col-xs-offset-1