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

displaying bootstrap thumbnails in angularjs

本文关键字：略图 引导程序 显示 angularjs      更新时间：2023-09-26

我有一个简单的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属性内部进行操作。

相关文章：