Make entire ion-item clickable with a link, not just anchor text

[kevin432]

I’m iterating through a JSON feed which contains 3 types of data - text, images and contacts. Contacts is sub divided into phone numbers, emails, web urls and SMS/text numbers. Each data item is displayed in an ion-item which has the ng-repeat on it. My problem is that for the contacts, the phone numbers, web/email and SMS links, only the text portion of the list item is tappable/clickable, ie you must tap the yellow part below:

My template:

<i ng-switch on="genericItem.TYPE">
    <i ng-switch-when="IMAGE"><img class="full-image" image-cache-directive image-cache-subdir="TEMP" image-filename="{{genericItem.IMAGE}}" ></i>
    <i ng-switch-when="FREETEXT"><i ng-bind-html="genericItem.TEXT"></i></i>

    <i ng-switch-when="CONTACT">
       
      <i ng-switch on="genericItem.CONTACTTYPE">
          <i ng-switch-when="PHONE">
            <a class="item-icon-left" href="tel:{{genericItem.CONTACTVALUE}}">
            <i class="icon ion-ios7-telephone SS-list-icon1"></i>{{genericItem.CONTACTVALUE}}
            </a>
          </i>

      <i ng-switch-when="EMAIL">
          <a class="SS-block-link item-icon-left" ng-click="emailContactDetails('{{genericItem.CONTACTVALUE}}','Inquiry from school app')">
            <i class="icon ion-ios7-email SS-list-icon2"></i>{{genericItem.CONTACTVALUE}}
          </a>
        </i>
        <i ng-switch-when="WEB">
          <a class="SS-block-link item-icon-left" ng-click="openBrowser('{{genericItem.CONTACTVALUE}}')">
          <i class="icon ion-ios7-world-outline SS-list-icon3"></i>{{genericItem.CONTACTVALUE}}
          </a>
        </i>


          <i ng-switch-when="SMS">
           <a class="item-icon-left" href="sms:{{genericItem.CONTACTVALUE}}">
            <i class="icon ion-chatbox-working SS-list-icon"></i>{{genericItem.CONTACTVALUE}}
           </a>
          </i>
      </i>

    </i>

</i>

If I add the ‘item’ class to my links like so:

<a class="item item-icon-left" ng-click="openBrowser('{{genericItem.CONTACTVALUE}}')">

It make the complete list item tappable, but also creates an item within an item which looks bad and must also be a syntax error.

I tried adding display:block via a class but that did not work.

Thanks,
Kevin

[brandyshea]

I think your best bet is to change the ion-item to a div and place the item class on each anchor tag: codepen

The ion-item adds padding (via the item class) so unless you put the href directly on the ion-item the anchor tag will always have space around it that isn’t clickable.

[kevin432]

Thank you for the reply and codepen, I did think of that (in fact I had initially prototyped it in the CSS version of the list) but I think I may need the Javascript tags as the next type of content I want to add is ion-slide-box for an image gallery - maybe I can just drop that into the middle of a CSS list?

[brandyshea]

The ionItem is more so for attaching the option/delete/reorder buttons. You can mix the JavaScript directives and css components to get the layout you’d like. I am not able to visualize what you mean, is the ion-slide-box an item in your list or is this going to a different view?

[kevin432]

Hi thanks for that - I will have a go at re-doing my template tomorrow (nearly home time here in Ireland). I was just looking at the docs, and yes I am not using any of the API functions so should be ok .

The slide box will be part of the normal content on a single view. Basically I have a CMS on a remote server that the client will use to add content - Text, Image (single), Contacts (as discussed above) and yet to be done, image gallery using the slide box. I aim that is looks like the grab below, except that one can swipe to view more images.

[brandyshea]

So I modified the codepen above to include a slidebox. I’m adding it in the javascript as TYPE: “GALLERY” and then dynamically adding slides based on the images defined. You would have to change this based on the response from your remote server. Let me know if this is what you mean.

[kevin432]

Hi I have it working now, thank you so much!

I noticed that there was some of my template missing on my original post - I thought I have fixed that with an edit but it’s still missing. I wanted to be able to create heading Items adn Items without a border so had this on my repeat:

<ion-item class="item-text-wrap" ng-repeat="genericItem in genericContentArray | orderBy:'ORDER'" ng-class="{'item-divider': genericItem.CONTAINER == 'ITEMDIVIDER', 'SS-item-no-border': genericItem.CONTAINER == 'ITEMNOBORDER'}"> 

So my final template is a little different to your codepen.

<div class="list">

  <i ng-repeat="genericItem in genericContentArray | orderBy:'ORDER'"> 
  
    <i ng-switch on="genericItem.TYPE">
        
        <i ng-switch-when="IMAGE">
          <div class="item item-text-wrap" ng-class="{'item-divider': genericItem.CONTAINER == 'ITEMDIVIDER', 'SS-item-no-border': genericItem.CONTAINER == 'ITEMNOBORDER'}">
            <img class="full-image" image-cache-directive image-cache-subdir="TEMP" image-filename="{{genericItem.IMAGE}}" >
          </div>
        </i>
        

        <i ng-switch-when="FREETEXT">
           <div class="item item-text-wrap" ng-class="{'item-divider': genericItem.CONTAINER == 'ITEMDIVIDER', 'SS-item-no-border': genericItem.CONTAINER == 'ITEMNOBORDER'}">
            <i ng-bind-html="genericItem.TEXT"></i>
          </div>
         
        </i>


        <i ng-switch-when="GALLERY">
            <div class="item item-text-wrap" ng-class="{'item-divider': genericItem.CONTAINER == 'ITEMDIVIDER', 'SS-item-no-border': genericItem.CONTAINER == 'ITEMNOBORDER'}">

                <ion-slide-box>
                <ion-slide ng-repeat="slide in genericItem.GALLERY">
                    <img class="full-image" image-cache-directive image-cache-subdir="TEMP" image-filename="{{slide.IMAGE}}" >
                </ion-slide>
              </ion-slide-box>

            </div>
        </i>


        <i ng-switch-when="CONTACT">
               
              <i ng-switch on="genericItem.CONTACTTYPE">
                  
                <i ng-switch-when="PHONE">
                  <a class="item item-icon-left" href="tel:{{genericItem.CONTACTVALUENOSPACE}}" ng-class="{'item-divider': genericItem.CONTAINER == 'ITEMDIVIDER', 'SS-item-no-border': genericItem.CONTAINER == 'ITEMNOBORDER'}">
                    <i class="icon ion-ios7-telephone SS-list-icon1"></i>{{genericItem.CONTACTDISPLAYTEXT}}
                  </a>
                </i>

                <i ng-switch-when="EMAIL">
                  <a class="item item-icon-left" ng-click="emailContactDetails('{{genericItem.CONTACTVALUENOSPACE}}','Inquiry from school app')" ng-class="{'item-divider': genericItem.CONTAINER == 'ITEMDIVIDER', 'SS-item-no-border': genericItem.CONTAINER == 'ITEMNOBORDER'}">
                    <i class="icon ion-ios7-email SS-list-icon2"></i>{{genericItem.CONTACTDISPLAYTEXT}}
                  </a>
                </i>

                <i ng-switch-when="WEB">
                  <a class="item item-icon-left" ng-click="openBrowser('{{genericItem.CONTACTVALUENOSPACE}}')" ng-class="{'item-divider': genericItem.CONTAINER == 'ITEMDIVIDER', 'SS-item-no-border': genericItem.CONTAINER == 'ITEMNOBORDER'}">
                  <i class="icon ion-ios7-world-outline SS-list-icon3"></i>{{genericItem.CONTACTDISPLAYTEXT}}
                  </a>
                </i>

                <i ng-switch-when="SMS">
                 <a class="item item-icon-left" href="sms:{{genericItem.CONTACTVALUENOSPACE}}" ng-class="{'item-divider': genericItem.CONTAINER == 'ITEMDIVIDER', 'SS-item-no-border': genericItem.CONTAINER == 'ITEMNOBORDER'}">
                  <i class="icon ion-chatbox-working SS-list-icon"></i>{{genericItem.CONTACTDISPLAYTEXT}}
                 </a>
                </i>
              </i>

        </i> <!-- end contact switch -->

    </i> <!-- end main switch -->

  </i>  <!-- end repeat -->

</div>

Since I’m using the i tag to place ng-repeat/switch/etc , does this extra markup have any negative effect rendering of the view?

[brandyshea]

@kevin432

Since I’m using the i tag to place ng-repeat/switch/etc , does this extra markup have any negative effect rendering of the view?

Do you mean using i compared to a div or something else? If you mean the complexity of the item, it depends on how many items you will be adding. mostly because you are adding images. There are a lot of posts on performance on the forums, so you’ll have to sift through to find the relevant bits.

Ionic List Performance

I have a really small app code-wise, which displays an item list (each item has several nested properties) that I can filter with a search field. Initially I load 20 items from an API. Once the user reaches the end of the list, he can click on “load more” to load another 20 items. After the items are retrieved they are stored in LocalStorage to avoid too many API calls (caching). The list can grow pretty quickly (if using infinite scroll even faster) and you can really feel the UI getting less a…

[kevin432]

Hi Brandy,

Well yes I meant is there any problem in doing what is, I guess, equivalent to something like

<ul>
  <i>
  <li>Ion item div</li>
  </i>
</ul>

Thanks for the link, I will have a look at that. Right now I’m working on the remote server CMS end so will be able to add more test data to the app and see if I have any performance issues. I don’t see the need for more than a few dozen items per view, but there many be many images in each slide box.

Anyway, I have everything working as required now, thanks!