我正在使用 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>
我正在动态显示数据,谁能帮帮我谢谢。
最佳答案
试试这个
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>
关于html - 如何使用col并排显示2张图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42387724/