代码之家 › 专栏 › 技术社区 › Gopal

“取消选择所有复选框”不适用于角度特性绑定

property-binding ngfor angular javascript

1

Gopal · 技术社区 · 8 年前

我在angular中使用了属性绑定来取消选中所有复选框,但它并没有按预期工作。这是我的 plunker

isSelected is the boolean variable which i have used to set the 'checked' attribute of checkbox.

模板:

<div *ngFor="let item of items">
    <input [checked]="isSelected" type="checkbox">{{item}}
</div>
<button (click)="onClear()">Clear All</button>

private items = ['a', 'b', 'c', 'd'];
  private isSelected = false;
  constructor() {
  }

  onClear(){
    this.isSelected = false;
  }

3 回复 | 直到 8 年前

1

Vega Stipe 8 年前

ngModel 在您的复选框上,使用 ngModelChange . 此外,还设置了一个辅助数组,以帮助您跟踪选中的状态。以下是一个(简化)示例:

<input [ngModel]="isSelected[i]" (ngModelChange)="onChange(i)" type="checkbox">{{item}}

打字脚本

 isSelected =  [];
 constructor() {
   this.onClear();
 }

 onChange(i){
    this.isSelected[i]=!this.isSelected[i]
  }
  onClear(){
    this.isSelected = [false, false, false, false];
  }

DEMO

2

1

Moema 8 年前

一种解决方案是

<div *ngFor="let item of items">
    <input [(ngModel)]="item.checked" type="checkbox">{{item.label}}
</div>
<button (click)="onClear()">Clear All</button>

使用模板:

private items = [ {'label':'a', 'checked': false },
  {'label':'b', 'checked': false},
  {'label':'c', 'checked': false},
  {'label':'d', 'checked': false}];

onClear(){
    for ( let cb of this.items ) {
      cb.checked = false;
    }
  }

3

1

Hasan Beheshti 8 年前

首先,你应该知道[checked]不起作用,你应该使用[(ngModel)]来处理这个问题,你应该从@angular/forms导入FormModule。

为此,可以在中使用这样的数组文件

items = [{name: 'a', isSelected:false}, 
         {name: 'b', isSelected:false},
         {name: 'c', isSelected:false},
         {name: 'd', isSelected:false}];

<div *ngFor="let item of items">
    <input [(ngModel)]="item.isSelected" type="checkbox">{{item.name}}
</div>