当前位置: 首页 > 知识库问答 >
问题:

使用angularjs ng repeat指令循环

丁正阳
2023-03-14

Angularjs ng用div标记重复。。我有一个带有div标记的代码,如图所示。。我想重复整个div,在第二个循环中img src是不同的。。如何使用angularjs中的ng repeat指令执行此操作?

 <div class="col-xs-12 col-sm-12 col-md-6" >
   <a href="Events.html">
     <div class="PastEvents">
       <div class="EventDate"><h5>25<br /><span>Feb</span></h5></div>
         <img src = "resources/front/images/UpComing-Event00.jpg">
         <h6>Lorem ipsum</h6>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non massa ut tortor volutpat eleifend eu lobortis urna.</p>
      </div>
   </a>
 </div>

共有2个答案

司马建柏
2023-03-14

我在试着理解你的问题。如果您想通过“ng repeat”索引显示不同的样式,可以执行以下操作。

<div class="PastEvents" ng-repeat="item in items">
  <div class="EventDate"><h5>25<br /><span>Feb</span></h5></div>
  <img src = "resources/front/images/UpComing-Event00.jpg" ng-if="$index == 1"><!-- first item-->
  <img src = "resources/front/images/UpComing-Event00.jpg" ng-if="$index != 1"><!-- second and rest items-->
  <h6>Lorem ipsum</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non massa ut tortor volutpat eleifend eu lobortis urna.</p>
</div>

如果你只是想显示不同的资源,只需使用:

<img src = "resources/front/images/UpComing-Event{{$index}}.jpg">
陆宾白
2023-03-14

JS:

myModule.controller('ctrl', function($scope) {
    $scope.imageSources = ["src1", "src2", "src3"]
})

超文本标记语言:

<div ng-repeat="src in imageSources" class="col-xs-12 col-sm-12 col-md-6" >
    <a href="Events.html">
        <div class="PastEvents">
            <div class="EventDate"><h5>25<br /><span>Feb</span></h5></div>
                <img ng-src="{{src}}">
                <h6>Lorem ipsum</h6>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non massa ut tortor volutpat eleifend eu lobortis urna.</p>
        </div>
     </a>
</div>

基本上,将图像源放在控制器中,并在模板中使用ng src指令

 类似资料:
  • 2、相等或为零循环指令(Loop While Equal or Loop While Zero) 相等或为零循环指令的一般格式: LOOPE/LOOPZ 标号 LOOPEW/LOOPZW 标号;CX作为循环计数器,80386+ LOOPED/LOOPZD 标号 ;ECX作为循环计数器,80386+ 这是一组有条件循环指令,它们除了要受CX或ECX的影响外,还要受标志位ZF的影响。其具体规定如下:

  • 5.2.8 循环指令 循环结构是程序的三大结构之一。为了方便构成循环结构,汇编语言提供了多种循环指令,这些循环指令的循环次数都是保存在计数器CX或ECX中。除了CX或ECX可以决定循环是否结束外,有的循环指令还可由标志位ZF来决定是否结束循环。 在高级语言中,循环计数器可以递增,也可递减,但汇编语言中,CX或ECX只能递减,所以,循环计数器只能从大到小。在程序中,必须先把循环次数赋给循环计数器。

  • 4、循环移位指令 循环移位指令有:循环左移ROL(Rotate Left)和循环右移ROR(Rotate Right)。 指令的格式:ROL/ROR Reg/Mem, CL/Imm 受影响的标志位:CF和OF 循环左移/右移指令只是移位方向不同,它们移出的位不仅要进入CF,而且还要填补空出的位。具体功能如下图(a)、(b)所示。 (a)、ROL (b)、ROR 下面是几个循环移位的例子及其执行结果

  • 3、辅助循环伪指令 (1)、终止循环伪指令 .BREAK .BREAK .IF condition 该伪指令用来终止包含它的最内层循环。前者是无条件终止循环,后者是仅当逻辑表达式condition为真时,才终止循环。 .WHILE 1 .REPEAT … .BREAK .IF condition … … .BREAK .IF condition … ENDW .UNTIL 0 对于以上二个循环,如

  • @Component({ selector: 'app-root', template: ` <div class="tabs-selection"> <tab *ngFor="let tab of tabs; let i = index" [active]="isSelected(i)" (click)="setTab(

  • 问题内容: 我正在努力理解为什么我的代码处于一种状态而不是另一种状态。自从我讲完指针已经有一段时间了,所以我可能会生锈! 基本上,我有一个用于将对象存储在内存中的具有功能的存储库结构。 因此,它所做的全部工作就是将RW互斥锁锁定在其上,并将指针添加到由标识符引用的映射中。 然后,我得到了一个功能,该功能将基本上遍历这些对象的一部分,并将它们全部存储在存储库中。 上面的方法不起作用,看起来一开始一切