[英]displaying bootstrap thumbnails in angularjs
I have a simple angularjs app with a simple array in a controller. 我有一个带有控制器中的简单数组的简单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"
}
]
};
}());
I want to display these records similar to bootstraps thumbnail, custom content example but using bootstraps grid with two columns for larger screens and 1 for xs. 我想显示类似于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
I have tried numerous examples I have found on the web with no luck. 我已经尝试了很多在网上找不到运气的示例。 I usually get just one column or nothing but the layout without the data.
我通常只得到一列或什么也没有,只有没有数据的布局。
My latest attempt... 我的最新尝试...
<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>
How can I display this data using the ng-repeat or something else? 如何使用ng-repeat或其他方式显示此数据?
Thanks 谢谢
<div class="row | $index % 3 == 0">
instead <div class="row | $index % 3 == 0">
代替
can you try with 你可以试试吗
<div ng-class="row | $index % 3 == 0">
Because you cant do manipulations inside a HTML attribute. 因为您无法在HTML属性内进行操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.