如何解决实现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>
这很好用。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。