1
votes

Comment gérer plusieurs boutons radio - Angular

Ici, j'ai une liste de questions oui ou non et fournissant des boutons radio pour sélectionner oui ou non. et je propose à l'utilisateur de répondre individuellement à chaque question et de fournir également deux boutons, c'est-à-dire Tous Oui et Tous Non.

La sélection individuelle est correcte, mais en cliquant sur le bouton pour sélectionner Tous oui ou Tout Non pour collecter les valeurs de chaque question.

<div *ngFor="let queestion of questionsList; let i=index; ">
	<label>
			{{question.id}} 
		<input type="radio"  [name]='i+1'>
			<span>Yes</span>
		<input type="radio"   [name]='i+1' >
			<span>No</span><br>
	</label>
</div>
<div style="text-align: center">
	<button type="button">All Yes</button>
	<button type="button">All No</button>	
	<button type="button">Submit</button>
	<button type="button">Clear</button>	
</div>

angular radio-button

0 commentaires

3 Réponses :

3
votes

Définissez l'attribut [value] pour le bouton radio, puis utilisez ngModel pour la liaison bidirectionnelle et ajoutez une propriété comme isSelected à votre modèle pour définir true / false pour tout quelque chose comme

selectAll(){
    this.questionsList.forEach(i=>{
      i.isSelected=true;
    })
  }

  unSelectAll(){
    this.questionsList.forEach(i=>{
      i.isSelected=false;
    })
  }

Dans votre composant

<div *ngFor="let question of questionsList; let i=index; ">
    <label>
            {{question.id}} 
        <input type="radio" [value]="true" [(ngModel)]="question.isSelected"  [name]='i+1'>
            <span>Yes</span>
        <input type="radio" [value]="false" [(ngModel)]="question.isSelected"  [name]='i+1' >
            <span>No</span><br>
    </label>
</div>

Démo

4 commentaires

Merci pour votre réponse ... ici, je ne veux pas remplir de réponse au départ. mais dans ce cas, lors du chargement de lui-même, il est sélectionné correctement .. alors comment gérer?

@royal supprimez simplement la propriété isSelected de votre tableau de données et définissez le type de tableau de données stackblitz .com / edit / angular-iimmgg

@jitender, Shafeeq, n'utilisez PAS [valeur] que vous avez déjà [(ngModel)], donnez simplement une valeur à la variable "question.isSelected"

@Eliseon avez-vous essayé si cela fonctionne Je pense que cela ne fonctionne pas si nous supprimons [valeur]

0
votes

Tout d'abord, changez le type de bouton pour taper tag. Ensuite, vous pouvez attribuer un identifiant et une valeur à la balise.

0 commentaires

0
votes

ce n'est qu'un exemple pour travailler avec le bouton radio

.HTML

  radio=false;
radio1=false;
  print(){
  console.log(this.radio,this.radio1)
  this.radio = false;
  this.radio1 = false;
}

.ts

<div class="form-check-inline">
    <label class="form-check-label">
    <input type="radio" class="form-check-input"  checked="!checked" name="radio"  [(ngModel)]="radio" [value]="true">active
  </label>
</div>
<div class="form-check-inline">
  <label class="form-check-label">
    <input type="radio" class="form-check-input" 
                      checked="!checked"name="radio1"  [(ngModel)]="radio1" [value]="true">Deactive
  </label>
</div>
<button (click)="print( radio,radio1)"> shaa</button>

Exemple Stackbliz

p >

1 commentaires

Shafeeq, n'utilisez PAS vérifié ni [valeur] que vous avez déjà [(ngModel)], donnez simplement une valeur à la variable "radio"