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

原创于 2020-06-23 16:44:12 发布 · 置顶 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

ionic5.x 同时被 3 个专栏收录

2 篇文章

订阅专栏

ion-checkbox

1 篇文章

订阅专栏

复选框

1 篇文章

订阅专栏

本文通过实际代码展示了如何在Ionic框架中使用复选框，并通过*ngFor循环遍历数据数组，实现动态显示和响应式操作。代码示例中包含了HTML和JS部分，详细展示了复选框的绑定和事件处理过程。

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

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

效果图