Question

我正在使用Angularjs，我希望并排显示2个图像，然后在下一行显示2个图像，等等......

Img1 Img2
Img3 Img4

我的代码，

 <section id="content">
<div class="content-wrap">
    <div class="container clearfix ">
        <div id="posts" class="small-thumbs topmargin-sm">
            <div  data-ng-repeat="partner in adminPartnersList">
                <span class="col-sm-6 col-md-6" data-ng-if='percent($index) == 0'>
                    <img img-cache class="image_fade mgnbtm" data-ng-src="uploads/{{partner.image}}" onError="this.src='images/noimage.png';" alt="">
                        <ul class="entry-meta clearfix">
                            <li><a ui-sref="edit-partners({'partnerId':partner.partner_id})"><i class="edit-faq-icon icon-edit"></i></a></li>
                            <li><a href="#" data-ng-click="deletePartner(partner._id, $index)"><i class="delete-faq-icon icon-trash2"></i></a></li>
                        </ul>
                </span>
                <span  class="col-sm-6 col-md-6" data-ng-if='percent($index) == 1'>
                    <img img-cache class="image_fade mgnbtm" ng-src="uploads/{{partner.image}}" onError="this.src='images/noimage.png';" alt=" ">
                        <ul class="entry-meta clearfix">
                            <li><a ui-sref="edit-partners({'partnerId':partner.partner_id})"><i class="edit-faq-icon icon-edit"></i></a></li>
                            <li><a href="#" data-ng-click="deletePartner(partner._id, $index)"><i class="delete-faq-icon icon-trash2"></i></a></li>
                        </ul>
                </span>
            </div>
        </div>   
    </div>  
    <span class="col-xs-12 text-center text-danger" data-ng-show="isShowNoPartnersMsg">
        No partners were found.
    </span>
    <span ng-show="!isShowNoPartnersMsg" class="col-xs-12 text-center">
        <pagination total-items="totalItems" data-ng-model="currentPage" max-size="maxSize" items-per-page="itemsPerPage" class="pagination-sm" boundary-links="true" data-ng-change="onAdminPartnerPageChanged()"></pagination>
    </span> 
</div>

我动态显示数据，任何人都可以帮助我谢谢。

Answer 1

使用class =＆＃34; col-sm-12＆＃34;

查看div

 <section id="content">
<div class="content-wrap">
    <div class="container clearfix">
        <div id="posts" class="small-thumbs topmargin-sm">
            <div class="entry clearfix" data-ng-repeat="partner in adminPartnersList">
              <div class="col-sm-12">
                <div class="col-sm-6" data-ng-if="percent($index) == 0">
                    <img img-cache class="image_fade mgnbtm" data-ng-src="uploads/{{partner.image}}" onError="this.src='images/noimage.png';" alt="">
                </div>
                <div class="col-sm-6" data-ng-if="percent($index) == 1">
                    <img img-cache class="image_fade mgnbtm" ng-src="uploads/{{partner.image}}" onError="this.src='images/noimage.png';" alt=" ">
                </div>
            </div>
            </div>
        </div>
    </div>  
    <span ng-show="!isShowNoPartnersMsg" class="col-xs-12 text-center">
        <pagination total-items="totalItems" data-ng-model="currentPage"  max-size="maxSize" items-per-page="itemsPerPage" class="pagination-sm" boundary-links="true" data-ng-change="onAdminPartnerPageChanged()"></pagination>
    </span> 
 </div>
</section>

Answer 2

试试这个

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.test = ["image1", "image2", "image3", "image4", "image5", "image6", "image7", "image8", "image9", "image10"]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <section id="content">
    <div class="content-wrap">
      <div class="container clearfix">
        <div id="posts" class="small-thumbs topmargin-sm">
          <div class="entry clearfix" data-ng-repeat="t in test">
            <div ng-if="($index + 1)%2==0" style="border-bottom:1px solid red;padding:5px">
              <img img-cache class="image_fade mgnbtm" data-ng-src="uploads/{{test[$index]}}" alt="{{$index}}" style="border-right:1px solid red;padding-right:5px;" >
              <img img-cache class="image_fade mgnbtm" data-ng-src="uploads/{{test[$index+1]}}" alt="{{$index + 1}}">
            </div>
          </div>
        </div>
      </div>
      <span ng-show="!isShowNoPartnersMsg" class="col-xs-12 text-center"> 
        </span>
    </div>
  </section>
</div>

Answer 3

对于小屏幕使用col-sm，对于中等大小的屏幕使用col-md。另外，只使用img src一次

<div class="entry clearfix row" data-ng-repeat="partner in adminPartnersList">
     <div class="col-sm-6 col-md-6" data-ng-if="percent($index) == 0">
          <img img-cache class="image_fade mgnbtm" data-ng-src="uploads/{{partner.image}}" onError="this.src='images/noimage.png';" alt="" />
     </div>
</div>

如何使用col并排显示2个图像？

3 个答案: