在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"
        }

    ]
};
}());

我想顯示類似於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或其他方式顯示此數據？

謝謝

Answer 1

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

你可以試試嗎

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

因為您無法在HTML屬性內進行操作。