离子离子切换和无线电组点击事件?

时间:2017-05-05 10:10:28

标签: angular ionic-framework ionic2 ionic3

我正在使用Ionic3,并希望有一个html元素(ion-toggleradio-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');
  }

1 个答案:

答案 0 :(得分:2)

ng-click是一个AngularJS(角度1)语法,在Angular&gt; = 2中不起作用。

ion-radioionSelect个输出事件,radio-groupionChange个事件。

所以你可以:

<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>