[英]displaying bootstrap thumbnails in angularjs
我有一个带有控制器中的简单数组的简单angularjs应用程序。
(function () {
"use strict";
angular.module('stylistFormulas').controller('ServiceTypesCtrl', ServiceTypesCtrl);
function ServiceTypesCtrl() {
var vm = this;
vm.serviceTypes = [
{
"text": "Retouch",
"image": "serviceTypes/images/Retouch.jpg",
"id": "retouch"
},
{
"text": "All Over",
"image": "serviceTypes/images/AllOver.jpg",
"id": "allover"
},
{
"text": "Highlights/Lowlights",
"image": "serviceTypes/images/Highlight.jpg",
"id": "highlight"
},
{
"text": "Ombre, Balayage, Sombre",
"image": "serviceTypes/images/Balayage.jpg",
"id": "ombre"
}
]
};
}());
我想显示类似于bootstraps缩略图,自定义内容示例的这些记录,但是使用bootstraps网格,其中两列用于较大的屏幕,而1列用于xs。
i.e.
image image
Title of Image Title of image
image image
Title of Image Title of image
image
Title of Image
我已经尝试了很多在网上找不到运气的示例。 我通常只得到一列或什么也没有,只有没有数据的布局。
我的最新尝试...
<div ng-repeat="serviceType in vm.serviceTypes">
<div class="row | $index % 3 == 0">
<div class="col-sm-6">
<div class="thumbnail">
<img ng-src="{{serviceType.image}}" />
<div class="caption">
<h3>{{serviceType.text}}</h3>
</div>
</div>
</div>
</div>
</div>
如何使用ng-repeat或其他方式显示此数据?
谢谢
<div class="row | $index % 3 == 0">
代替
你可以试试吗
<div ng-class="row | $index % 3 == 0">
因为您无法在HTML属性内进行操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.