Question

Angularjs ng-repeat with div tag..i有一个带有div标签的代码如图所示..我想重复整个div，img src在第二个循环上是不同的..如何用ng-repeat指令做这个在angularjs？

 <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>

Answer 1

JS：

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

HTML：

<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指令

Answer 2

我试着理解你的问题。如果你想通过＆＃39; ng-repeat＆＃39;的索引显示不同的风格，你可以这样做。

<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">

循环使用angularjs ng-repeat指令

2 个答案: