Question

我正在努力建立一个画廊。我正试图通过ng-repeat在画廊中显示图像。

图像被加载但是它们以线性模式加载（如我使用的列表）但我希望它们在网格系统中加载。每行三个图像。

是否可以创建类似这样的东西

<ul ng-repeat = "x in dogObj">

    <div class ="row">
        <div class ="col-lg-4">
            <li class ="list-group-item" text-align><img src="{{x.src}}" height="350" width = "400"></li>
        </div>  
    </div>

</ul>

json文件嵌入在控制器

中

app.controller("myCtrl", 

    function($scope)  
    {
       $scope.dogObj =    [{"actual_name":"dog1","shown_name":"dog1","src":"images/dog1.jpg"},
                          {"actual_name":"dog2","shown_name":"dog2","src":"images/dog2.jpg"},
                           {"actual_name":"dog3","shown_name":"dog3","src":"images/dog3.jpg"},
                           {"actual_name":"dog7","shown_name":"dog7","src":"images/dog7.jpg"},
                           {"actual_name":"dog4","shown_name":"dog4","src":"images/dog4.jpg"},
                           {"actual_name":"dog5","shown_name":"dog5","src":"images/dog5.jpg"},
                           {"actual_name":"dog6","shown_name":"dog6","src":"images/dog6.jpg"},
                           {"actual_name":"dog8","shown_name":"dog8","src":"images/dog8.jpg"}];});

我已将图像位置放在json文件中。我怎样才能做到这一点？

Answer 1

1 - 使用li代码作为ul代码的直接子代是一种很好的做法。

2 - 您的迭代器（ng-repeat）我认为必须在li代码中使用，而不是ul代码。

3 - 您可以代替使用src="{{}}"使用ng-src=""指令。

我认为这段代码是你的答案

<ul class="row">
  <li class="col-lg-4" ng-repeat="x in dogObj">

    <div class="list-group-item" text-align>
      <img ng-src="x.src" height="350" width="400">
    </div>

  </li>
</ul>

Answer 2

通常你会遍历这行，如下所示：

<div class="row" ng-repeat = "x in dogObj">
    <div class ="col-lg-4">
        <img src="{{x.src}}" height="350" width = "400"></li>
    </div>
</div>

您的示例创建格式错误的html（检查ul和li元素的关系）。你是如何看待JSON的？您还会在响应式布局中遇到图像大小的问题。

ng-repeat没有提供很多逻辑（这是一件好事，你在视图中不需要太多的逻辑）。如果你想要每行3张图片，则必须以三元组的形式排列数据，如此

data = [ [ dogObj, dogObj, dogObj ] , ... ]

然后迭代列表，并创建每个triplett的一行，如前所示。更简单但不干净：您还可以在一行中渲染所有图像，并依赖响应式布局使用正确的css类渲染许多行

...
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><img ...
...

基本上告诉浏览器渲染3列而不管屏幕大小。该行将突破到下一行。图像尺寸仍将打破这一点。 bootstrap提供类.img-responsive，这可能会有所帮助。在www.getbootstrap.com

上查看网格系统的文档和img-responsive

无论如何，更好的选择可能是在屏幕尺寸过小时显示较少的列，如果屏幕非常大则显示更多。

Answer 3

您好使用此代码，这是100％正常工作

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <div class="row">
        <div ng-repeat = "x in dogObj">
            <div class ="col-lg-4">
                <img src="{{x.src}}">
            </div>
        </div>
    </div>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.dogObj =    [{"actual_name":"dog1","shown_name":"dog1","src":"images/dog1.jpg"},
            {"actual_name":"dog2","shown_name":"dog2","src":"images/dog2.jpg"},
            {"actual_name":"dog3","shown_name":"dog3","src":"images/dog3.jpg"},
            {"actual_name":"dog7","shown_name":"dog7","src":"images/dog7.jpg"},
            {"actual_name":"dog4","shown_name":"dog4","src":"images/dog4.jpg"},
            {"actual_name":"dog5","shown_name":"dog5","src":"images/dog5.jpg"},
            {"actual_name":"dog6","shown_name":"dog6","src":"images/dog6.jpg"},
            {"actual_name":"dog8","shown_name":"dog8","src":"images/dog8.jpg"}];});
</script>
</body>
</html>

如何在图库视图中使用ng-repeat堆叠图像？

3 个答案: