在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屬性中的操作。