Badges on List items' left side


#1

Hey all,

I find badges very useful! I think they look great and are perfect for my goals!

Just now, I tried to create badges on the left side of the list items and it’s not working for me. Any help on this?

<div data-ng-repeat="items in itemsRechts | filter:{title:searchtext}">
    <!-- Main item, which is what counts in this question-->
    <ion-item data-nav-clear id="menu_aandachtgebied_{{items.id}}" class="item-icon-right item-energized light-border" data-ng-click="setSelectedItem('{{items.id}}');">
        <span data-ng-if="items.props.length > 0" class="badge badge-assertive">{{items.props.length}}</span> <!--Show the amount of items in the accordion submenu-->
        <span class="item-title">{{items.title}}</span> <span class="item-spaceholder">&nbsp;</span>
        <i class="icon {{items.icon}}"></i>
    </ion-item>
    <!-- Accordion style submenu, not important now, but the reason the ng-repeat is on the div instead of the item -->
    <ion-item data-menu-close="" data-ng-if="isItemSelected(items.id)" data-ng-repeat="prop in items.props | orderBy:['+order','+title']" id="{{prop.id}}" class="item-icon-right item-stable">
        <i class="icon ion-minus-round"></i>
        <span class="item-title">{{prop.title}}</span><span class="item-spaceholder">&nbsp;</span>
    </ion-item>
</div>

Results in this: (list with icon on right side)

So, how do we achieve the same result on list items with icons on the left side? Basically, I would want to have an option to set badges on the left side of the item, and when there is an icon set as well, it would have to stack like it does on the right side like in attached picture.

By putting the icon on the left side we would get something like this:

While I want something like this:

(but, of course with the niceness that it has on the right side, this is just my terrible paint skills)

I can’t seem to make this work with my custom css… Not coming close at all actually.