Change the toggled state of an item based on another toggled event?

Ionic Framework ionic-v3
1

I have a set of “permissions” for DJ’s on a radio broadcasting channel, some have conditions for example:

History Report - (currently toggled as false)
Listener Statistics - (currently toggled as true)

image

<ion-item>
<ion-label>History Report</ion-label>
<ion-toggle [(ngModel)]=“data.historyReport”></ion-toggle>
</ion-item>

<ion-item>
<ion-label>Listener Statistics</ion-label>
<ion-toggle [(ngModel)]=“data.listenerStatistics”></ion-toggle>
</ion-item>

Trying to implement this with a basic javascript switch

switch (this.checkPermissions(djPermission.ResourceAccess.FlatPermissions, resourcePermissions.HistoryReport)) {
case true:
this.stationListenerDisabled = true;
break;
default:
this.stationListenerDisabled = false;
break;
}

The switch in this case does the disabling of the toggled items, but my code would be in there to change to toggled states between the items.

If I change History Report to true, I am already disabling Listener Statistics, but I need to change the state to false and back to true if History is false again.

image

My code is generated by Angular on the Front End side dynamically.
Done with Ionic / Typescript / Javascript

If that makes any sense…

Please any ideas? I have tried targeting child nodes and attribute nodes etc. but it gets nasty after a while.

2

Seeing the code you have currently would probably be of use to anybody trying to help.

1 Like
3

Well it is a basic ionic ion-toggle component, which needs to change another toggled items value. Not sure how all the code would make that simpler. Do you want me to post the code?

4

There is nothing basic whatsoever about mixing jQuery and Angular, nor “targeting child nodes and attribute nodes” in an Angular application, so I worry that what you have now is relatively esoteric and unidiomatic.

5

Perhaps this will help you a bit more… @rapropos (Updated description)

PS: Based on your comments, it really has nothing to do with the libraries I am using.
More on what ion-toggles can and cannot do, or how to approach the above said scenario.

6

The ordinary Angular way to do any of this (including the disabling) is to take advantage of property binding. See this example:

   <ion-item>
      <ion-label>oya</ion-label>
      <ion-toggle [(ngModel)]="state" [disabled]="!enabled"></ion-toggle>
    </ion-item>

    <button ion-item (click)="toggleState()">
      <ion-label>toggle state</ion-label>
    </button>

    <button ion-item (click)="toggleEnabled()">
      <ion-label>toggle enabled</ion-label>
    </button>

  state = false;
  enabled = true;

  toggleState(): void {
    this.state = !this.state;
  }

  toggleEnabled(): void {
    this.enabled = !this.enabled;
  }
1 Like