我试着用离子列表和离子无线电指令实现一个单选按钮列表.我希望下面的代码是不言自明的。
我现在只是在学离子型的,可能是在做一些很愚蠢的事情。如果您需要任何其他细节,请告诉我。
这是我的输出。知道我做错了什么吗?
我的html :-
<ion-navbar *navbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Select your location</ion-title>
</ion-navbar>
<ion-content padding class="select-location">
<ion-list radio-group>
<ion-list-header *ngIf="!selectLocation">
Where are you located?</ion-list-header>
<ion-list-header *ngIf="selectLocation">
Selected Location:
<p [innerText]="selectLocation.name"></p>
</ion-list-header>
<ion-radio
*ngFor="let location of locations"
(select)="selectLocation = location"
[value]="location.code"
>{{location.name}}
</ion-radio>
</ion-list>
</ion-content>
我的ts:-
[import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
/*
Generated class for the SelectLocationPage page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component({
templateUrl: 'build/pages/select-location/select-location.html',
})
export class SelectLocationPage {
public locations;
constructor(public nav: NavController) {
this.locations = \[
{
code: 1,
name: 'Powai',
pincode: '400076'
},
{
code: 2,
name: 'Chandivali',
pincode: '400072'
},
{
code: 3,
name: 'Dadar',
pincode: '400023'
},
{
code: 4,
name: 'Colaba',
pincode: '400001'
}
\];
}
}][1]
发布于 2016-06-14 10:59:45
这是一些看起来很奇怪的代码;它应该更像这
<ion-list radio-group [(ngModel)]="selectLocationName">
<ion-list-header *ngIf="!selectLocationName">
Where are you located?</ion-list-header>
<ion-list-header *ngIf="selectLocationName">
Selected Location:
<p> {{ selectLocationName }}</p>
</ion-list-header>
<ion-item *ngFor="let location of locations">
<ion-label>{{ location.name }}</ion-label>
<ion-radio [value]="location.name "</ion-radio>
</ion-item>
</ion-list>
https://stackoverflow.com/questions/37814824
复制