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);
        }
      }

当用户选择多个复选框时,会弹出一个模态(由于某种原因,该模态不会在插件中弹出)并询问是否要选择多个复选框.现在,我想要做的是,如果用户点击没有按钮,那么只有最后点击的按钮才会保持模态弹出窗口,并且在用户的进一步点击时,将一次只选择一个复选框.如果他们点击"是",则可以选择多个复选框.但是,我如何实现这一目标,任何帮助？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}
  ];

现在你可以在每个复选框的[(ngModel)]中加上'checked'的值:

<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.你需要为每个'复选框'输入添加不同的'name'属性,这就是我在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)
}

检查obj计数:

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

例如:

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

getCheckedValues()将返回:

["1","2"]

祝好运!