The shy Ion-Delete-Button in Ionic Framework

Took me a while to figure this out. I was trying out Ionic framework for one of my mobile side projects. The learning curve was fairly low if you know a bit of AngularJS-- I got stumped on a simple UI issue however.

I wanted to put a delete button beside the items of my list so my code was like:

<div ng-app="jsApp">
    <div ng-controller="Ctrl1">
        <ion-content>
            <ion-list >
                <ion-item>
                    <ion-delete-button class="ion-minus-circled"></ion-delete-button>Hello, list item!</ion-item>
            </ion-list>
            
        </ion-content>
    </div>
</div>

Hmm.. where's the delete button? Turns out you had to use show-delete="1" directive in the tag.


<div ng-app="jsApp">
    <div ng-controller="Ctrl1">
        <ion-content>
            <ion-list show-delete="1" >
                <ion-item>
                    <ion-delete-button class="ion-minus-circled"></ion-delete-button>Hello, list item!</ion-item>
            </ion-list>
            
        </ion-content>
    </div>
</div>

the source code http://jsfiddle.net/rebooting/5BSNE/

That being said I enjoyed using Ionic Framework a lot, it's a very clean framework.