在angularjs中显示引导程序缩略图

Question

我有一个简单的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" 
     } 

    ] 
}; 
}()); 

我想显示类似白手起家的缩略图，自定义内容的例子，但使用白手起家格有两列的大屏幕和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重复或别的东西这个数据？

感谢

Answer 1

<div class="row | $index % 3 == 0">代替

可以尝试用

<div ng-class="row | $index % 3 == 0"> 

因为你不能做一个HTML属性中的操作。