实现CSS复选框不适用于模型变量

问题描述

这是html

<div class="checkBox checkBox-circle">
       <label>
        <input type="checkBox" [attr.checked]="isSelected ? true : null" class="filled-in"
          (change)="rowToggleSelection(row,$event,i)" />
        <span></span>
      </label>
</div>

有一个将true/false设置为isSelected的按钮，在我单击复选框本身来更改复选框的值之前，它可以正常工作。单击复选框后，它将从按钮上停止工作。

解决方法

使用ngModel，看看您如何在.ts中不再需要

<form *ngFor="let item of items" class="checkbox checkbox-circle">
       <label>
        <input name="ck" type="checkbox" [(ngModel)]="item.isSelected"  class="filled-in"
           />
          <span>{{item.name}}</span>
      </label>
</form>
<pre>
{{items|json}}
</pre>

对checkbox进行材料化处理时，使用checked而非attr.checked将其标记为已选中。

打字稿文件

// items to use as checkbox
public items = [
    {
      name: "first",isSelected: false
    },{
      name: "second",isSelected: true
    }
  ];

// toggle the checkbox
toggleCheckbox(item) {
    item.isSelected=!item.isSelected;
}

模板文件

<form *ngFor="let item of items" class="checkbox checkbox-circle">
       <label>
        <input type="checkbox" [checked]="item.isSelected" class="filled-in"
          (change)="toggleCheckbox(item)" />
          <span>{{item.name}}</span>
      </label>
</form>

什么都不适合我，所以我使用了材质图标来实现同样的效果

console.log(array1.filter(item => array2.indexOf(item) == -1));

和一些CSS

<!-- checked -->
<i class="material-icons label-icon active" *ngIf="isSelected">radio_button_checked</i>
<!-- un-checked -->
<i class="material-icons label-icon" *ngIf="!isSelected">radio_button_unchecked</i>

这很好用。

angular checkbox materialize