I have some hierarchical category. E.g:
For the categories with no sub-categories, I'd like to have a simple toggle. However, for the sub-categories, i'd like to be able to EITHER, toggle the whole category on/off, or click on it and toggle individual sites on and off.
I have a codepen here with how it could look visually: http://codepen.io/anon/pen/aOZjmx
JS
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
$scope.items = [
{
id: 0,
drillDown: true
},
{
id: 1,
drillDown: false },
{
id: 2,
drillDown: false },
];
});
HTML
<ion-list>
<ion-toggle ng-repeat="item in items">
Item {{ item.id }}
<i ng-hide="{{!item.drillDown}}" class="ion-chevron-right"></i>
</ion-item>
</ion-list>
Problem is, as soon as you make something an ion-toggle, only the toggle glyph becomes clickable. So, I'd be interested in a solution on how to make the whole row clickable (so I can navigate to a child screen) OR a different UI element to achieve the same.
If i understand correctly, you're trying to wire up an event handler to the click of both of your toggle and ion-item. This can be easily done by setting up ng-clicks on both the controls. However, the pain in the head is event bubbling.
Since the ion-toggle is essentially inside your ion-item, clicking on ion-toggle will invoke ng-click of toggle as well as item. In order to prevent it, you must stop event propagation.
Now, the updated HTML will look like :
<ion-content>
<!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists -->
<ion-list>
<ion-item ng-repeat="item in items" ng-click="callClick()">
<ion-toggle ng-model="item.drillDown" ng-click="toggleClick($event)">
Item {{ item.id }}
<i ng-hide="{{!item.drillDown}}" class="ion-chevron-right"></i>
</ion-item>
</ion-list>
</ion-content>
And in the JS Code :
$scope.toggleClick = function($event) {
alert("toggle click");
$event.stopImmediatePropagation();
};
$scope.callClick = function() {
alert("i was clicked");
};