如何检查是复选框已检查angular2

时间:2016-12-20 13:18:36

标签: angular

我想检查是否在if和else语句中选中或取消选中复选框。

<md-checkbox id="mon" (change)="mon($event)" [checked]="true">Checked</md-checkbox>



mon(e){
    if(e.target.checked){
      console.log("This is checked")
    } else {
      console.log("unchecked");
    }
  }

我认为我做错了。我一直无法检查未定义的内容。如何做到这一点?

2 个答案:

答案 0 :(得分:5)

我们可以查看材料的源代码复选框:

event.source = this;
event.checked = this.checked;

this._controlValueAccessorChangeFn(this.checked);
this.change.emit(event);

https://github.com/angular/material2/blob/2.0.0-alpha.11/src/lib/checkbox/checkbox.ts#L288-L292

所以你可以这样做:

mon(e){
  if(e.checked){
    console.log("This is checked")
  } else {
    console.log("unchecked");
  }
}

答案 1 :(得分:5)

声明一个名为filter的变量

filter: boolean= false;

然后使用html部分中的ngModel来访问并分配其值。

<input type="checkbox" [(ngModel)]="filter" (click)="filterData()">

它将调用函数filterData(),您可以使用它来执行所有功能

filter(){
  this.filter = !this.filter;// this will change value of it true and false 
}

对于更多复选框,您可以使用声明更多变量,如filter1:boolean