离子：自定义离子列表项

Question

我是Ionic框架的新手，我正在尝试在图片中创建一个离子列表，但我无法弄清楚如何在一个中使用item-thumbnail-right和item-avatar右边有一些东西的项目和图片中的伪页脚...... 我试过这段代码：

<ion-list>
    <a class="item item-thumbnail-right" ng-repeat="activeOffer in activeOffers"
         ng-href="#/app/offers/{{activeOffer.offer.id}}">
        <img ng-src="{{siteRoot}}/upload/assets/img/media-support/{{activeOffer.mediaSupport.fileName}}">
        <div class="item item-avatar">
            <img ng-src="{{siteRoot}}/upload/assets/img/localbusiness/{{activeOffer.localBusiness.logo}}">
            <h2>{{activeOffer.localBusiness.label}}</h2>
            <p>{{activeOffer.localBusiness.description}}</p>
        </div>
        <h2>{{activeOffer.offer.title}}</h2>
        <p>{{activeOffer.offer.description}}</p>
    </a>
</ion-list>

但是，我得到了一些丑陋的东西

Answer 1

尝试以下示例：

<ion-item class="item-remove-animate item-avatar-right" ng-repeat="item in listingData.app" type="item-text-wrap" href="#/tab/restaurant_category/{{item.rest_id}}">
    <img ng-src="{{item.logo}}">
    <img src="" style="float:left;width: 15px;height: 15px;">
    <h2>{{item.restaurant_name}}</h2>

    <p ng-repeat="cuisne in item.available_cuisine.cuisine">{{cuisne.name}}</p>
    <div class="row order-policy-time">

        <div class="col col-50">
            <p>delivers in 60 min</p>
        </div>
        <div class="col text-right">
            <p>collection in 30 min</p>
        </div>
    </div>
    <div class="welcome-custom-icon">
        <span class="ti-angle-right"></span>
    </div>
</ion-item>