Как работать с несколькими переключателями - угловой - PullRequest
Новая
       33

Как работать с несколькими переключателями - угловой

0 голосов
/ 30 сентября 2019

Здесь у меня есть список вопросов «да» или «нет», и есть переключатели, чтобы выбрать «да» или «нет». и я предоставляю пользователю возможность ответить индивидуально на каждый вопрос, а также предоставляю две кнопки, т. е. все да и все нет.

Индивидуальный выбор в порядке, но нажимая кнопку, чтобы выбрать либо все да, либо все нет, я не получаю идеисвязать и как собрать значения каждого вопроса. 

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

Ответы [ 3 ]

2 голосов
/ 30 сентября 2019

Установите атрибут [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;
    })
  }

Демо

0 голосов
/ 30 сентября 2019

это только пример работы с переключателем

.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

0 голосов
/ 30 сентября 2019

Прежде всего измените тип кнопки на тип тега. Затем вы можете присвоить тэгу идентификатор и значение.

Другое решение заключается в том, что вы можете добавить в кнопку события изменения или щелчка, а для выбора методов вы можете отправить некоторые значения для работы в своем JavaScript.

...