ionic3自定义单选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | import { Component } from '@angular/core' ; import { NavController } from 'ionic-angular' ; @Component({ selector: 'page-home' , templateUrl: 'home.html' }) export class HomePage { list=[{ "key" : "you" , "value" : '优' , "chek" : true },{ "key" : "liang" , "value" : '良' , "chek" : false },{ "key" : "cha" , "value" : '差' , "chek" : false }]; data={ "key" : "you" , "value" : '优' , "chek" : true }; constructor(public navCtrl: NavController) { } public chekFun(i){ let me= this ; this .list.forEach( function (data,inde,array) { if (i==inde){ data.chek= true ; me.data=data; } else { data.chek= false } }); } public submit(){ console.log( this .data); } } |
<ion-header>
<ion-navbar>
<ion-title>
自定义单选
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-grid text-center>
<ion-row style="font-size: 1.7em;">
<ion-col col-4 *ngFor="let item of list,let i =index" (click)="chekFun(i)">{{item.value}} <ion-icon name="checkmark-circle" [ngClass]="{'button-clear-ios-primary': item.chek,'button-clear-ios-my':!item.chek}"></ion-icon></ion-col>
</ion-row>
</ion-grid>
<button ion-button block (click)="submit()">提交</button>
</ion-content>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥