I need to showcase 2 images in a row using AngularJS, with the next two images in the following row and so forth.
Img1 Img2
Img3 Img4
This is my code:
<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>
I am dynamically displaying data and would appreciate any assistance. Thank you.