Question

在下面给出的代码中，我可以随机选中或取消选中任意数量的复选框。

    <button class="button" type="button">Device 1</button>
   &nbsp; <label class="switch">
  <input name="device1" type="checkbox" [(ngModel)]={{device1}} (ngModelChange)="OnInput($event)">
  <div class="slider round"></div>
</label>
 <br/> <button  class="button" type="button">Device 2</button>
    &nbsp; <label class="switch">
  <input name="device2" type="checkbox"  [(ngModel)]={{device2}} (ngModelChange)="OnInput($event)">
  <div class="slider round"></div>
</label>
   <br/> <button class="button" type="button">Device 3</button>
    &nbsp; <label class="switch">
  <input  name="device3" type="checkbox" [(ngModel)]={{device3}} (ngModelChange)="OnInput($event)" >
  <div class="slider round"></div>
</label>
   <br/> <button  class="button" type="button">Device 4</button>
    &nbsp; <label class="switch">
  <input  name="device4" type="checkbox" [(ngModel)]={{device4}} (ngModelChange)="OnInput($event)">
  <div class="slider round"></div>
</label>
  <br/>  <button class="button" type="button">Device 5</button>
    &nbsp; <label class="switch">
  <input name="device5" type="checkbox"[(ngModel)]={{device5}} (ngModelChange)="OnInput($event)">
  <div class="slider round"></div>
</label>
  <br/>  <button class="button" type="button">Device 6</button>
    &nbsp; <label class="switch">
  <input  name="device6" type="checkbox"[(ngModel)]={{device6}} (ngModelChange)="OnInput($event)">
  <div class="slider round"></div>
</label>
  <br/>  <button class="button" type="button">Device 7</button>
    &nbsp; <label class="switch">
  <input name="device7" type="checkbox" [(ngModel)]={{device7}} (ngModelChange)="OnInput($event)">
  <div class="slider round"></div>
</label>
  </div>
export class DashboardComponent{


    OnInput(value:any){
        console.log(value);
    }

我想知道哪个输入标签正在被选中...并希望仅使用输入名称和值来更改复选框详细信息

Answer 1

您可以将angular2的命名标识符/引用#the_name传递给每个输入，并在方法中传递它：

  <input name="device1" type="checkbox" 
   #device1
   [(ngModel)]={{device1}} 
   (ngModelChange)="OnInput($event, device1)"><!--pass it here-->

Answer 2

使用 ngModelChange

<input type="checkbox" [(ngModel)]="object.selected" (ngModelChange)="onChange(object.selected)">

在onChange调用时，重置计数器

如何检查哪个输入checkBox标签更改为角度2中的值？

2 个答案: