Customising ion-toggle inside an ion-list

ionic-v1
1

I’d like to have an ion-toggle inside an ion-list, where the text of the toggle is clickable.

    <ion-toggle   ng-repeat="item in items">
      <span  ng-click="onClick()">Item {{ item.id }}</span>
      <i  ng-click="onClick()" ng-hide="{{!item.drillDown}}" class="ion-chevron-right"></i>
    </ion-item>
  </ion-list>

Here’s a codepen: http://codepen.io/anon/pen/aOZjmx

The click events don’t fire. I’ve also tried creating an with multiple child elements, but then the ion-toggle doesn’t style very well.

  <ion-list>
            <ion-item ng-repeat="item in items">
                <a ng-click="blah()">{{item.name}}</a>
                <i ng-click="blah()" ng-if="item.drilldown"class="ion-chevron-right"></i>
                <ion-toggle ng-change="toggleCategory({{item}})" ng-model="item.toggleState.allowed"
                            toggle-class="toggle-calm" style="border: none;">
                </ion-toggle>

            </ion-item>
          </ion-list>

Any help to either get onClick() to fire, or to style inside an ion-item, so it is over to the right with no border and lined up next to the text?

2

Hi @steven_pack, Did you ever solve this? I’m looking to do the same.

3

In a fashion, yes. I don’t customise the toggle, I just put a block href next to it to achieve what I wanted.

You should be able to remove the width:90% too

<ion-toggle toggle-class="toggle-calm" ng-repeat="category in categories" ng-change="toggleCategory({{category}})" ng-model="category.toggleState.allowed">
                      <a style="display: inline-block; width: 90%;" ng-click="navigateToDetail(category)">{{category.name}}</a>
                      <i ng-click="navigateToDetail(category)" ng-if="category.apps.length > 0"
                         class="icon ion-chevron-right icon-accessory" style="color: darkgray"></i>
</ion-toggle>
4

Hi @steven_pack,

I tried your suggestion, but the click still does not get through to the anchor; it never triggers.

My version of your code:

<ion-toggle class="primarytext item-icon-left" ng-change="updateMobileData(useMobileData)" ng-model="useMobileData"> <i class="icon ion-information-circled" ng-click="showInfo('autoDetect.html', $event)"></i> <a style="display: inline-block" ng-click="showInfo('autoDetect.html', $event)"> <b>Use Mobile Data</b> </a> </ion-toggle>

showInfo() has a console command as first line, so I know if it’s clicked. This is not displaying.

My only guess is that the toggle is blocking the interaction to the text/icon…

5

I solved it using

See here: [SOLVED] Clickable toggle label

1 Like
6

Do you have a plunker or jsfiddle? If you hover over your element using Chrome dev tools, is the tag actually where you expect and clickable?