1
votes

Comment obtenir la valeur du commutateur ON / OFF

J'ai un commutateur On / Off dans mon projet Web:

HTML:

getSwitcherValue(onoffswitch) {
   console.log("onoffswitch:"+onoffswitch.style.content);
}

CSS:

.onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #93297E; color: #FFFFFF;
}

.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}

Je veux savoir si le mélangeur est activé ou désactivé, j'ai essayé d'obtenir la valeur, en utilisant le code suivant, mais cela ne fonctionne pas:

<div  class="onoffswitch">
   <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" 
    id="myonoffswitch" checked>
   <label class="onoffswitch-label" for="myonoffswitch">
     <span #onoffswitch class="onoffswitch-inner"></span>
     <span class="onoffswitch-switch"></span>
   </label>
</div>

Avez-vous des idées comment obtenir la valeur du commutateur marche / arrêt?

javascript angular web

4 commentaires

Votre concept "onoffswitch" semble inapproprié. Je pense qu'il n'y a aucun moyen de lire la valeur du contenu par E.style.content. stackoverflow.com/ questions / 2651739 /…

Pourquoi voulez-vous obtenir une valeur de css qui n'est responsable que de l'apparence du bouton? Et avec quelle version Angular travaillez-vous?

Je crois que c'est ce que vous voulez, stackoverflow. com / questions / 53930713 /… .. Vous devez utiliser l'entrée radio si vous utilisez un interrupteur à bascule.

@ HarunYılmaz Je veux vérifier si le commutateur est activé ou désactivé, angular2

5 Réponses :

0
votes

utilisez onoffswitch.checked au lieu de onoffswitch.style.content

0 commentaires

0
votes

Remplacez par:

    <div  class="onoffswitch">
   <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" 
    id="myonoffswitch" [(ngModel)]="isChecked">
   <label class="onoffswitch-label" for="myonoffswitch">
     <span #onoffswitch class="onoffswitch-inner"></span>
     <span class="onoffswitch-switch"></span>
   </label>
</div>

Et ajoutez isChecked dans votre fichier ts en tant que booléen.

0 commentaires

0
votes

Vous utilisez Angular. Utilisez donc NgModel .

public onOff = false;

Et dans votre fichier TS :

<div  class="onoffswitch">
   <input type="checkbox" [(ngModel)]="onOff" name="onoffswitch" class="onoffswitch-checkbox" 
    id="myonoffswitch" checked>
   <label class="onoffswitch-label" for="myonoffswitch">
     <span #onoffswitch class="onoffswitch-inner"></span>
     <span class="onoffswitch-switch"></span>
   </label>
</div>

Vous pouvez maintenant simplement cocher this.onOff pour voir si votre commutateur est "on" ou non.

p >

0 commentaires

0
votes

Si vous utilisez angular, utilisez simplement sa fonction appelée liaison bidirectionnelle

Réf: https://angular.io/api/forms/NgModel

pour la solution de votre problème:

https://stackblitz.com/edit/angular-wcaqhb

1 commentaires

Merci, votre solution m'a aidé

0
votes

Vous pouvez essayer cette solution

Fichier HTML (par exemple app.component.html)

.onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #93297E; color: #FFFFFF;
}

.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}

Ts File (app .component.ts)

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  isSwitched:boolean=true;
  getSwitcherValue(onoffswitch) {
    this.isSwitched=!this.isSwitched;
   console.log("onoffswitch:"+this.isSwitched);
}
}

Fichier Css (app.component.css)

<div  class="onoffswitch">
   <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" 
    id="myonoffswitch" [checked]="isSwitched"
  (change)="getSwitcherValue(isSwitched)">
   <label class="onoffswitch-label" for="myonoffswitch">
     <span #onoffswitch class="onoffswitch-inner"></span>
     <span class="onoffswitch-switch"></span>
   </label>
</div>

0 commentaires