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

【问题标题】：AngularJS ng-repeat apply css to whole listAngularJS ng-repeat 将 css 应用于整个列表
【发布时间】：2018-04-18 22:17:45
【问题描述】：

我正在做一个图像网格视图库。我正在使用那个 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>

现在我有用于将其更改为具有 3 列的网格的 css。问题是当我静态地做 3x <li> 时，css 效果很好，我连续有 3 张图像。但是当我用 ng-repeat 加载它时，每行只有一张图像。似乎 css 是在 ng-repeat list 之前应用的，并且不知何故它不会为我的图像制作网格。

我应该怎么做才能使它正确？

【问题讨论】：

请分享css和控制器代码

标签： javascript jquery html css angularjs

【解决方案1】：

在这个 sn-p 中，您实际上重复了三遍 <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}}？）

【讨论】：