aping
Version:
apiNG is an AngularJS directive that enables you to receive, aggregate, limit, order and display data from one or more sources. The complete setup is dead simple, just by adding data-attributes to your html
39 lines (36 loc) • 2.1 kB
HTML
<div class="aping-design-default aping-design-default-social">
<div ng-controller="apingDefaultDesignController">
<div data-images-loaded masonry class="row" preserve-order reload-on-show>
<div class="masonry-brick col-lg-4 col-sm-6 col-xs-12" ng-repeat="item in results" ng-cloak>
<div class="box">
<div class="box-header" ng-if="item.img_url">
<a ng-href="{{::item.post_url}}" target="_blank" class="aping-picture-link"><img
ng-src="{{::item.img_url}}" class="main-image img-responsive" alt=""></a>
</div>
<div class="box-content">
<h4 class="" ng-if="item.caption">{{::item.caption}}</h4>
<div class="" ng-if="item.text" linkify>
{{::item.text | limitTo: 250}}{{::item.text.length > 250 ? '...' : ''}}
</div>
<div class="clearfix"><br></div>
<div class="box-footer text-muted">
<div class="pull-left text-left">
<div ng-if="item.blog_name">
von <a href="{{::item.blog_link}}" target="_blank">{{::item.blog_name}}</a>
</div>
<div am-time-ago="{{::item.timestamp}}"></div>
</div>
<div class="pull-right platform-box">
<a ng-href="{{::item.post_url}}" target="_blank" class="platform-link">
<img ng-src="{{getPlatformIcon(item.platform)}}" alt="{{item.platform}}"
title="{{item.platform}}" class="platform-icon">
</a>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>