Question

我正在尝试在不同图像的数组上使用ng-repeat。问题是，这些图像需要在线并进行翻转过渡。这是我决定使用ng-repeat之前的所有内容：

`<div class="row">
       <div class="col-md-3">
           <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
               <div>
                   <div class="front">
                       <img id="firstTrophy" class="trophy locked" src="/img/trophy.png" />
                   </div>
                   <div class="back box">
                       <p class="text">
                     You're a champion!!!!
                       </p>
                   </div>
               </div>
           </div>
       </div>`

这是我现在的ng-repeat：

(in view.html)
`<div ng-repeat="trophy in trophies track by $index">
                          <img src="{{ trophy }}" />`

（在控制器中）

var trophies = [
"img/trophy.png",
"img/trophy.png",
"img/trophy.png",
"img/trophy.png",
"img/trophy.png"];

感谢您提供的所有帮助！

Answer 1

将src替换为ng-src

<div ng-repeat="trophy in trophies track by $index">
                          <img ng-src="{{ trophy }}" />`

<强> DEMO

Ng-重复一系列图像

1 个答案: