离子离子切换和无线电组点击事件？答案

【问题标题】：Ionic ion-toggle and radio-group click event?离子离子切换和无线电组点击事件？
【发布时间】：2017-10-03 18:36:36
【问题描述】：

我正在使用 Ionic3，并且想要一个 html 元素（ion-toggle 和 radio-group），如果我点击它，它会触发一个 javascript 函数。

如下所示，我在this的基础上添加了ng-click属性，但它不调用javascript函数。

任何建议表示赞赏。

settings.html

<ion-list>
  <ion-item ng-click="notifications()">
    <ion-label>Notifications</ion-label>
    <ion-toggle [(ngModel)]="personModel.notifications" id="notifications">Notifications</ion-toggle>
  </ion-item>
</ion-list>

<br>

<ion-list radio-group [(ngModel)]="personModel.milesKm" id="milesKm">
  <ion-item ng-click="milesKm()">
    <ion-label>Km</ion-label>
    <ion-radio value="0"></ion-radio>
  </ion-item>
  <ion-item ng-click="milesKm()">
    <ion-label>Miles</ion-label>
    <ion-radio value="1"></ion-radio>
  </ion-item>
</ion-list>

settings.ts

  notifications(): void {
    alert('notifications');
  }

  milesKm(): void {
    alert('milesKm');
  }

【问题讨论】：

标签： angular ionic-framework ionic2 ionic3

【解决方案1】：

ng-click 是 AngularJS (angular 1) 语法，不适用于 Angular >= 2。

ion-radio 具有 ionSelect 输出事件，radio-group 具有 ionChange 事件。

所以你可以：

<ion-list radio-group [(ngModel)]="personModel.milesKm" id="milesKm">
  <ion-item>
    <ion-label>Km</ion-label>
    <ion-radio value="0" (ionSelect)="milesKm()"></ion-radio>
  </ion-item>
  <ion-item ng-click="milesKm()">
    <ion-label>Miles</ion-label>
    <ion-radio value="1" (ionSelect)="milesKm()"></ion-radio>
  </ion-item>
</ion-list>

或者：

 <ion-list radio-group [(ngModel)]="personModel.milesKm" id="milesKm" (ionChange)="milesKm()">
  <ion-item>
    <ion-label>Km</ion-label>
    <ion-radio value="0"></ion-radio>
  </ion-item>
  <ion-item ng-click="milesKm()">
    <ion-label>Miles</ion-label>
    <ion-radio value="1"></ion-radio>
  </ion-item>
</ion-list>

或者ion-item 有简单的click 事件。

<ion-list radio-group [(ngModel)]="personModel.milesKm" id="milesKm">
  <ion-item (click)="milesKm()">
    <ion-label>Km</ion-label>
    <ion-radio value="0"></ion-radio>
  </ion-item>
  <ion-item (click)="milesKm()">
    <ion-label>Miles</ion-label>
    <ion-radio value="1"></ion-radio>
  </ion-item>
</ion-list>

【讨论】：