Ionic3 ionChange获取value值及Tab切换

作者:猿奇
链接:www.greatytc.com/p/9d8c7b7558d8
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

1、ion-toggle 点击“开关”:

调用toggleFun方法将toggle值传到ts:

<ion-toggle [(ngModel)]="isToggled" (ionChange)="toggleFun()"></ion-toggle>

ts调用:

public isToggled: boolean;

constructor(...) {
  this.isToggled = false;
}

public toggleFun() {
  console.log("Toggled: "+ this.isToggled); 
}

2、ion-radio 单选及Tab切换:

调用langSelect方法将radio value值传到ts:

<ion-list radio-group   [(ngModel)]="langSelect" (ionChange)="langSelect()">
  <ion-list-header>
    Language
  </ion-list-header>
  <ion-item>
    <ion-label>Javascript</ion-label>
    <ion-radio checked="true" value="0"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Java</ion-label>
    <ion-radio value="1"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Python</ion-label>
    <ion-radio value="2"></ion-radio>
  </ion-item>
</ion-list>
<div class="langSelect0" *ngIf="langSelect=='0'">Javascript Cnt</div>
<div class="langSelect1" *ngIf="langSelect=='1'">Java Cnt</div>
<div class="langSelect2" *ngIf="langSelect=='2'">Python Cnt</div>

ts调用:

public langSelect= "0";

 public langSelect() {
    console.log("langSelect: "+ this.langSelect);
  }

ion-toggle、ion-radio、ion-checkbox 等用法都差不多,交互不同进行不同的操作

很久没有更新技术贴了,之前也是赶上公司项目忙得晕头转向,什么小程序、混合开发APP、公众号、管理后台及webApp,七八个项目,也是累得没正形了。。。

呵呵,偷偷透露一句,最近本宝宝换工作了……

发现新兴技术猿们都在简书更贴,我也来啦,Ionic相关的技术问题,会慢慢更新上来,欢迎关注!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,928评论 18 139
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,523评论 0 17
  • 工作和生活中总是有些叽叽歪歪的人,他们没事最喜欢干的事情就是以某某某评头论足,朋友圈里是各色各样的鸡汤鸭血,我不知...
    千夜凡尘阅读 859评论 0 1
  • 正月立春、二月惊蛰、三月清明、四月立夏、五月芒种、六月小暑、七月立秋、八月白露、九月寒露、十月立冬、十一月大雪、十...
    梦沉薇露阅读 3,798评论 0 0
  • 在组织内部有一部分员工,公司不出钱培训,他们为了自身成长,不得不自己出钱学习,这就是基层团队的现状。 我和在万达、...
    樂鈫阅读 251评论 0 1