Angular12 +Ionic5 之ion-check复选框的多选与反选

本文介绍了如何在Angular12和Ionic5中使用ion-check组件实现复选框的单选、全选和反选功能。通过HTML、SCSS和TypeScript代码展示具体实现,并提供了操作复选框的示例。文章最后,作者分享了作为初学者在学习Angular和Ionic过程中遇到的困难。
摘要由CSDN通过智能技术生成

一:需求:复选框的单选全选以及反选。

话不多说,直接上代码。

html部分:

<div style="flex:1">

  <ion-item>

    <div class="fl"><button class="sort">

        <ion-icon name="arrow-down-outline" (click)="Sort()"></ion-icon>

      </button>分类</div>

    <div class="ssfl"><button class="sorts">

        <ion-icon name="arrow-down-outline" (click)="Sorts()"></ion-icon>

      </button>所属分类</div>

    <!-- 全选 -->

    <ion-checkbox class="chooseAll" slot="start" [(ngModel)]="selectAll" (click)="onselectAll()"></ion-checkbox>

  </ion-item>

  <div [style]={flex:1}>

    <ion-item *ngFor="let item of list&

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值