如何使用ng-class-even和ng-class-odd在ng重复中拆分div结构?

时间:2014-10-28 09:46:50

标签: javascript html css angularjs

enter image description here

我想重复图片中显示的项目。我用ng-repeat做了重复。重复所有内容,但不是图像中显示的结构。如何分割这样的内容.. ???

<div class="activityCon" ng-repeat="activity in activity1"> 
    <!--image-->
    <div class="n-col erpSub"> <a class="link brand erp-display-block fk-uppercase erp-text-center" href="#"> 
      <div class="bg-gradient"> <span class="fa fa-chevron-down"></span> </div>
      <p class="title erp-font-15">{{ activity }}<br>
        <span></span></p>
      </a> 
    </div>
    <!--image-->
    <div class="clearfix"></div>

  <!--1st content wrap-->
  <div class="col-md-6 warpLine1 msg-time-chat" ng-class="$odd ? 'col-md-6' : '' " > 

    <!--message content - 1 -->
    <div class="message-body msg-in"  ng-repeat="activityDesc in dailyActivity[$index].activityArray">

      <div class="text col-md-11 firstWrap" > <img class="img-thumbnail" src="{{activityDesc.taskImage}}" alt=""> <span class="label label-info">{{activityDesc.taskName}}</span>
        <p>{{ activityDesc.taskMessage }}</p>
        <p class="chat_message_date"><a href="#">{{activityDesc.taskUser}}</a> <span> {{activityDesc.taskDate}} , {{activityDesc.taskTime}}</span></p>
      </div>
    </div>
    <div class="clearfix"></div>

    <!--message content - 1 --> 
  </div>

 <!--  <div class="col-md-6 WarpLine2 msg-time-chatRight"> 

       <div class="message-body msg-in" ng-if="$odd" ng-repeat="activityDesc in dailyActivity[$index].activityArray"> 
           <div class="text col-md-11 firstWrap"> <img class="img-thumbnail" src="{{activityDesc.taskImage}}" alt=""> <span class="label label-info">{{activityDesc.taskName}}</span>
            <p>{{ activityDesc.taskMessage }}</p>
            <p class="chat_message_date"><a href="#">{{activityDesc.taskUser}}</a> <span> {{activityDesc.taskDate}} , {{activityDesc.taskTime}}</span></p>
        </div>
     </div>
    <div class="clearfix"></div>

  </div> -->
  <!-- <div class="col-md-6"></div> -->
  <div class="clearfix"></div>
</div>

1 个答案:

答案 0 :(得分:0)

我认为你的病情是对的。你这样检查过......

ng-class="$odd ? 'col-md-6' : '' "

相反,你可以改变为

ng-class="{'pull-left':($index %2 ==0),'pull-right':($index %2 ==1)}"