2014-10-28 40 views
1

enter image description here如何使用ng-class-even和ng-class-odd以ng的形式重复划分div结构?

我想重复如图所示的项目。我已经通过使用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> 
+0

可以请设置一个plunker? – 2014-10-28 09:58:11

回答

0

我认为你的情况是错误的。你检查像这样...

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

相反u能变化

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

多数民众赞成在工作很好..谢谢 !!!! – arjun 2014-10-28 10:43:15