JSFiddle - React, Tailwind, and code Playground

by marcelly

HTML

<link rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css">
<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>
<div ng-controller="PopupCtrl">
<ion-list> 
    <ion-item class="item-icon-right item-avatar defaultItem" data-ng-repeat="item in items " data-ng-style="{'background-image':'url({{item.url}})'}">
        
        <img src="{{item.url}}"/>          
            <div class="itemInfo">
                <h2>{{item.name}}</h2>
                <p>
                    id: {{item.id}}<br/>
                    url: {{item.url}}
                </p>
            </div>
                           
    </ion-item>
</ion-list>
</div>

CSS

/*.defaultItem > .item-content  {
    background-image: url("http://t0.gstatic.com/images?q=tbn:ANd9GcSEtKrXuUIiURHP7PFGY_cdYDXyuWhilTgWHkJxZRWAt3-tlSy6epfAAFQQ");
    background-repeat: no-repeat;
    background-size: cover;
}*/

JavaScript

angular
    .module('ionic.example', ['ionic'])
    .controller('PopupCtrl', function($scope, $ionicPopup) {
        
        $scope.items = [{name: "item1", id: 1, url: "http://www.tv-testbild.com/2003/Testbild_Maroko.jpg"},{name: "item2", id: 2}];
    });