Question

在这里，我有一个是或否问题列表，并提供单选按钮以选择是或否。并且我为用户提供针对每个问题的单独回答，还提供两个按钮，即“全选”和“全选”。

可以单独选择，但是单击按钮可以选择“全是”或“全否”。我不知道要绑定什么以及如何收集每个问题的值。

DerivedTwo

Answer 1

为单选按钮设置[value]属性，然后使用ngModel进行双向绑定，并向模型中添加诸如isSelected之类的属性，以对所有诸如此类的事物设置true / false >

<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>

在您的组件中

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

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

Demo

Answer 2

首先将按钮类型更改为type标签。然后，您可以为标签分配ID和值。

另一种解决方案是您可以向按钮添加更改或单击事件，并单击方法可以发送一些值以在javascript中起作用。

Answer 3

仅是使用单选按钮的示例

.HTML

<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>

.ts

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

Stackbliz example

如何处理多个单选按钮-Angular

3 个答案: