Question

我正在做一个图像网格视图galery。我正在使用ng-repeat和CSS。我的代码如下：

<div class="grid-container" style="display:block;">
<ul class="rig columns-3" ng-repeat="element in elementsList track by $index">
    <li>
         <img ng-src='{{src_url}}' ng-click="routeTo('/')"/>            
    </li>                  
</ul>
</div>

现在我有css用于更改为具有3列的网格。问题是，当我静态地执行3x <li>时，css工作得很好，我连续有3张图像。但是当我用ng-repeat加载它时，我每行只有1个图像。看来css是在ng-repeat列表之前应用的，并且它不会为我的图像制作网格。

我该怎么做才能做到正确？

Answer 1

在此代码段中，您实际上重复了<ul>三次，而不是<li>。

将ng-repeat移动到<li>，类似于：

<ul class="rig columns-3">
    <li ng-repeat="element in elementsList track by $index">
         <img ng-src='{{src_url}}' ng-click="routeTo('/')"/>            
    </li>                  
</ul>

（另外，您确定需要{{src_url}}而不是{{element.src_url}}吗？）

AngularJS ng-repeat将css应用于整个列表

1 个答案: