时间戳

首页 > 解决方案 > 如何在图库视图中使用 ng-repeat 堆叠图像？

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

问题描述

我正在尝试做一个画廊。我正在尝试通过 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 文件中。我怎样才能做到这一点？

标签： angularjs

解决方案

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>

推荐阅读