Question

我有3个单选按钮，我想在其中显示一个特定的内容，目前这里是我的代码，显示3个单选按钮：

 <ion-list radio-group>
    <ion-item class="listItems">
        <ion-label>Option 1</ion-label>
        <ion-radio checked="false" value="Option1"></ion-radio>
    </ion-item>

    <ion-item class="listItems">
        <ion-label>Option 2</ion-label>
        <ion-radio checked="false" value="Option2"></ion-radio>
    </ion-item>

    <ion-item class="listItems">
        <ion-label>Option 3</ion-label>
        <ion-radio checked="false" value="Option3"></ion-radio>
    </ion-item>
    </ion-list>

我发现在Angular1中写了一个codepen，当检查单选按钮时显示/隐藏内容，我已尝试使用它来使其在我的ionic2 / angular2项目中工作;但是，它没有用！

我还在StackOverflow找到了一个帖子，用于 在使用jQuery 检查单选按钮后切换内容但我还不够幸运让它在我的项目中运作！

您能提供一些解决方案吗？

Answer 1

这基于您的代码。您需要[(ngModel)]代码中的ion-list。

<ion-list radio-group [(ngModel)]="content" >
    <ion-item class="listItems">
        <ion-label>Option 1</ion-label>
        <ion-radio checked="false" value="Option1"></ion-radio>
    </ion-item>

    <ion-item class="listItems">
        <ion-label>Option 2</ion-label>
        <ion-radio checked="false" value="Option2"></ion-radio>
    </ion-item>

    <ion-item class="listItems">
        <ion-label>Option 3</ion-label>
        <ion-radio checked="false" value="Option3"></ion-radio>
    </ion-item>
    </ion-list>
    <h *ngIf="content=='Option1'"> Option 1</h>
    <h *ngIf="content=='Option2'"> Option 2</h>
    <h *ngIf="content=='Option3'"> Option 3</h>

Angular2 / Ionic2 - 选中单选按钮后切换内容

1 个答案: