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

debugcn 发表于 Dev

杰登

在这里，我列出了是或否问题，并提供了单选按钮来选择是或否。我让用户为每个问题单独回答，并提供两个按钮，即全部是和全部否。

个人选择很好，但单击按钮选择全部是或全部否我不知道如何绑定以及如何收集每个问题的值。

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

紧张

[value]为单选按钮设置属性，然后ngModel用于双向绑定，isSelected并向您的模型添加一些属性，以便为所有类似设置真/假

<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;
    })
  }

演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。