Complex Items with Option Buttons

tutorials
1

I struggled with getting a complex <ion-item> to work properly. The problem is that the directive wraps your content inside a div with a item-content class. You can’t style that class - or at least not easily.

I ended up just taking the code that was generated and modifying it. Maybe someone has a better suggestion or maybe this will help others:

To replace a traditional <ion-item> like this:

<ion-item class="spot-img-item stretch-content"
    ng-repeat="(locationKey, location) in mapdropCtrl.fls.val"
    style="background-image: url(img/{{location.img}});">
  <div class="drop-cover-text">
  <h2>{{location.locationName}}</h2>
  <p>Favorite Location</p>
  </div>
  <ion-option-button class="button-positive" ng-click="share(item)">
    Share
  </ion-option-button>
  <ion-option-button class="button-info" ng-click="edit(item)">
    Edit
  </ion-option-button>
</ion-item>

I created this:

<div class="spot-img-item item item-complex item-left-editable"
   ng-repeat="(locationKey, location) in mapdropCtrl.fls.val">
  <div class="item-content stretch-content " style="background-image: url(img/austin.jpg);">
    <div class="drop-cover-text">
      <h2 class="ng-binding">Austin</h2>
      <p>Favorite Location</p>
    </div>
  </div>
  <div class="item-options">
    <div class="spot-options">
      <div class="button-assertive button" ng-click="mapdropCtrl.share('someid')">
        <i class="icon ion-ios7-upload-outline"></i>
        <div>Share</div>
      </div>
      <span class="button-divider"></span>
      <div class="button-assertive button" ng-click="mapdropCtrl.delete('someid')">
        <i class="icon ion-ios7-trash-outline"></i>
        <div>Delete</div>
      </div>
    </div>
  </div>
</div>
1 Like
2

So what are you trying to do @Calendee?

3

Needed a list with option buttons where the items have a background that is set dynamically. Then, the text has to float on top.

4

Ahh alright, that makes sense.

Let me try to hash something out real quick.

5

Code above has it working. Sorry - didn’t make that clear.

Note sure it’s a great way, but it works.

6

Ah alright…still went a head and played around with it to see if it was possible to re-use the default structure.

4 Likes
7

Ahhh As a directive. Clever.

Thanks. I’ll figure out which works best and is more performant.

One thing does ion-list still not work with collection-repeat? Seem to recall that you couldn’t do option buttons with collection repeat.

8

Well you can, but right now it’s a bit wonky. There’s a few things that need to get ironed out first

9

hey. that sounds interesting. cause i am trying since some time to create a collection-repeat with an ion-list (i need it for the option items) and if i try to open a option item of a specific item it does open the option item on another item. will this be possible in the future?

10

Yup, it will be possible. Just need to work on a few things before 1.0

11

ohhh that sounds very good. so till then i have go on with the normal ng-repeat. many thanks updating me on that