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}}&nbsp; <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>
posted @   A-long  阅读(1966)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥
点击右上角即可分享
微信分享提示