Ionic: Benutzerdefinierte Ion Liste Artikel

Question

Ich bin neu in Ionic Framework, ich versuche, eine Ion-Liste wie auf dem Bild zu erstellen, aber ich kann nicht herausfinden, wie item-thumbnail-right und item-avatar in dem einen Element mit einigen Sachen zu verwenden in der rechten Ecke und eine Pseudo-Fußzeile wie im Bild ... habe ich versucht, diesen Code:

<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> 

Aber, ich bin etwas hässlich

Answer 1

Versuchen mit folgendem Beispiel erhalten:

<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>