ionic5.x复选框ion-checkbox动态加载

技术上的东西说太多都是虚的,咱们直接上代码说明问题。

html代码

<!-- Checkboxes in a List -->
<ion-list>
    <ion-item *ngFor="let entry of form">
        <ion-label>{{entry.val}}</ion-label>
        <ion-checkbox  item-start slot="start" [(ngModel)]="entry.isChecked" [(ngModel)]="isToggled" (ionChange)='getSelectValue(entry.val)'></ion-checkbox>
        <input type="checkbox" />
    </ion-item>
</ion-list>
js声明两个变量
form = [
    { val: 'Pepperoni', isChecked: true , color: 'info'},
    { val: 'Sausage', isChecked: false , color: 'info'},
    { val: 'Mushroom', isChecked: false , color: 'info'}
];
isToggled: boolean;
js方法
getSelectValue(val: string): void {
    // tslint:disable-next-line:no-console
    console.log('复选框获取的bool' + this.isToggled + 'value' + val );
}

效果图

哇咔咔,完美实现复选框。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值