Angular 2根据条件选择或取消选择复选框

Question

请注意，我想避免使用 jquery 并仅使用 Angular 2。话虽如此，这里是 PLUNK

我有一些自定义复选框，最初可以选择多个。我将所选项目存储在这样的数组中:

    eventChkArr: any = [];
    updateChecked(value: any, event: any) {
        if (event.target.checked) {
          this.eventChkArr.push(value);
        }
        else if (!event.target.checked) {
          let index = this.eventChkArr.indexOf(value);
          this.eventChkArr.splice(index, 1);
        }
      }

当用户选择多个复选框时，会弹出一个模态框(由于某种原因，此模态框未在 plunk 中弹出)并询问他们是否要选择多个复选框。现在，我想要做的是，如果用户没有点击任何按钮，那么只有模式弹出窗口之前最后点击的按钮将保持选中状态，并且在用户进一步点击时，一次只会选中一个复选框。如果他们单击"is"，则可以选择多个复选框。但是，我如何实现这一点，有什么帮助吗？ TIA。

Answer 1

https://plnkr.co/edit/yU4P3zsQ3QaH9Vby8M3I?p=preview

您可以将每个复选框的选中值保存在 'eventTypeChkBox' 数组中:

 eventTypeChkBox: Array<{chkBoxImageUrl: string, id: string, val: string, checked: boolean}> = [
    {chkBoxImageUrl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg" ,id: "item-1", val: "1", checked: false},
    {chkBoxImageUrl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg", id: "item-2", val: "2", checked: false},
    {chkBoxImageUrl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg", id: "item-3", val: "3", checked: false},
    {chkBoxImageUrl: "http://www.w3schools.com/bootstrap/cinqueterre.jpg", id: "item-4", val: "4", checked: false}
  ];

现在您可以将“checked”的值放入每个复选框的 [(ngModel)] 中:

<div *ngFor="let eventChk of eventTypeChkBox">
   <div class="col-md-3">
      <label class="btn-custom">
          <img src="{{eventChk.chkBoxImageUrl}}" alt="{{eventChk.val}}" class="img-check img-circle" [ngClass]="{'check': eventChk.isClassVisible } "
                       width="100" height="100">
                  <input  [(ngModel)]="eventChk.checked" (ngModelChange)="onModelChange(eventChk) type="checkbox" name="{{eventChk.id}}" id="{{eventChk.id}}" value="{{eventChk.val}}" class="hidden" autocomplete="off"
                         (change)="updateChecked(eventChk, $event); eventChk.isClassVisible = !eventChk.isClassVisible;">
                </label>
                <p>{{eventChk.val}}</p>
              </div>
            </div>

** 如果你想使用 [(ngModel)] 指令:

1.您应该在“AppModule”中导入“FormsModule”:

import {FormsModule} from "@angular/forms";
@NgModule({
  imports: [ BrowserModule, FormsModule],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

2。您需要为每个“复选框”输入添加不同的“名称”属性，这就是我在 html 中使用 name="{{eventChk.id}}"(您需要唯一的名称)的原因

当你有 [(ngModel)] 时，你可以控制检查什么和不检查什么。

如果你想检测模型变化，你可以在模板和类上使用 (ngModelChange)="onModelChange(eventChk)":

 onModelChange(eventTypeChkBoxObj) {
    if(eventTypeChkBoxObj.checked) {
      if(this.getCheckedCount() == 2){
        let result = confirm("Multiple checkboxes?");
        if(!result) eventTypeChkBoxObj.checked = false;
      }  
    }

  }

对于您不需要'eventChkArr'的检查项目值，您可以过滤它们:

getCheckedValues() {
   return this.eventTypeChkBox.filter(obj => obj.checked).map(obj => obj.val)
}

检查对象数:

 getCheckedCount():number{
    return this.getCheckedValues().length;
  }

例如:

 eventTypeChkBox = [{checked:true, val:1},{checked:true, val:2},{checked:false, val:3}]

getCheckedValues() 将返回:

["1","2"]

祝你好运!