如果单击angular2中的另一个复选框,如何自动取消选中所有复选框?

时间:2017-05-01 11:11:43

标签: angular angular2-directives

我是angular2初学者。我使用一个常用的复选框创建一个部分隐藏和显示。选中此复选框后,显示另一个复选框列表并取消选中,隐藏这些复选框列表。

但问题是,如果我选中复选框列表,然后隐藏此部分并再次检查,以便显示已经检查但我尝试取消选中所有。如果选中了列表,请单击“常用”复选框,以便取消选中此列表。

html代码: -

 function replaceAll(find, replace, str) {
    try {
       str = str.replace(new RegExp(find,"g"), replace);
     }
     catch (e) { }
     return str;
 }
 var input = "qqq\nwww\n eee\n rrrr";
 var output = replaceAll("\n", "</br>", input);
 console.log("output:" + output);

component.ts

<form [formGroup] = "group">
<p>
  <md-checkbox (change)="form()" [(ngModel)]="good" [ngModelOptions]="{standalone: true}" >Show/Hide and cheecked and unchecked</md-checkbox>
</p>

<div *ngIf="*ngIf="isVisible"" formArrayName="check">
  <span  *ngFor="let test of tests; let i = index" formGroupName="{{i}}">
     <md-checkbox formControlName="{{test.value}}" [checked] = "test.status" >{{test.display}}</md-checkbox>
   </span>
</div>

请告诉我们怎么做?

1 个答案:

答案 0 :(得分:0)

请看这个plunker示例: https://plnkr.co/edit/KeicXhLFs6h5uxBolMuD?p=preview

在app.ts中:

update(index) {
    var currentState = this.options[index].val;
    for(let i = 0; i < this.options.length; i++) {
        this.options[i].val = false;
    }
    this.options[index].val = !currentState;
}

更新功能将在将all设置为false之前获取复选框的当前状态。在此之后,单击的复选框将以相反的方式更新。这样您也可以取消选中该复选框。

希望这有帮助。