在 AngularJS 中以网格形式获取图像

Question

如何将所有的图片以网格的形式显示出来，这些图片都是来自后台，所以图片是动态的。而且我还必须在这些图像上加上描述，而这些描述也来自 AngularJS 中的后端？

Answer 1

您可以使用 ng-repeat 向您展示带有如下描述的图片：

<li class="col-sm-3" ng-repeat="product in productList">
                        <img src={{product.imageUrl}} />
                        <label>{{product.description}}</label>
                    </li>

Here 是文档

Answer 2

如果图像数据以数组形式出现，那么您可以使用 ng-repeat 指令显示图像。

控制器

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.imageList = allImage;
});

HTML

<div class="col-md-3" ng-repeat="image in imageList track by $index">
    <img src="{{image.imageUrl}}" />
    <label> {{image.description}} </label>
</div>

在 AngularJS 中以网格形式获取图像

Getting Images in the form of Grid in AngularJS

html

css

angularjs

angular-ui-bootstrap