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

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加载它时，我每行只有一个图像。似乎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}}吗？)