如何在离子无线电元件上使用ngModel
How can I use a ngModel on an ion-radio element?
>我正在尝试在离子无线电元件上实现ngModel,但不知何故它不起作用。这是我的代码:
import {
Page
} from 'ionic-angular';
@Page({
templateUrl: 'build/pages/settings/settings.html'
})
export class Settings {
constructor() {
this.unit = 2;
}
}
<ion-list radio-group>
<ion-list-header>
Unit
</ion-list-header>
<ion-item>
<ion-label>Metric (kg)</ion-label>
<ion-radio value="1" [(ngModel)]="unit"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Imperial (lbs)</ion-label>
<ion-radio value="2" [(ngModel)]="unit"></ion-radio>
</ion-item>
</ion-list>
我尝试在离子输入和离子选择上实现它,效果很好。我还尝试将directives: [FORM_DIRECTIVES]
添加到我的@Page并添加了相应的导入,但这并不能解决问题。
有什么想法吗?
语法
现在已经改写了,ngModel
应该只放在ion-list
和radio-group
一起。无需在每个ion-radio
元素上都有它们。
<ion-list radio-group [(ngModel)]="unit">
<ion-list-header>
Unit
</ion-list-header>
<ion-item>
<ion-label>Metric (kg)</ion-label>
<ion-radio value="1"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Imperial (lbs)</ion-label>
<ion-radio value="2" ></ion-radio>
</ion-item>
</ion-list>
有关更多信息,您可以访问ionic2框架论坛链接
它正在与 Ionic 5 配合使用。
<ion-radio-group value="answerswer">
<ion-item *ngFor="let item of question?.answers">
<ion-label> {{item.answer}} {{answer}}</ion-label>
<ion-radio slot="start" color="tertiary" value="{{item.id}}
(ionBlur)="saveAnswer(item.id)">
</ion-radio>
</ion-item>
</ion-radio-group>
从 Ionic 4+ 开始,正确的 sintax 是:
<ion-list>
<ion-radio-group [(ngModel)]="unit">
<ion-list-header>
Unit
</ion-list-header>
<ion-item>
<ion-label>Metric (kg)</ion-label>
<ion-radio value="1"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Imperial (lbs)</ion-label>
<ion-radio value="2"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
你也必须在 Ionic 5 中更新下面的代码。
this.unit = 2;
自
this.unit = '2';
总之,您不能使用整数变量作为ion-radio
值。
如果要使用整数类型的单位,请参考以下代码。
this.options = [
{
label: 'Metric (kg)',
value: 1
},
{
label: 'Imperial (lbs)',
value: 2
}
];
在.html代码
中<ion-radio-group [(ngModel)]="unit">
<ion-list-header>
<ion-label>
Unit
</ion-label>
</ion-list-header>
<ion-item *ngFor="let opt of options">
<ion-label>{{opt.label}}</ion-label>
<ion-radio [value]="opt.value" slot="start"></ion-radio>
</ion-item>
</ion-radio-group>
这是适用于离子 5..经过测试且工作正常
<ion-list>
<ion-radio-group >
<ion-list-header>
<ion-label>{{'Drivers' | translate}}</ion-label>
</ion-list-header>
<ion-item *ngFor="let item of drivers" lines="none" (ionChange)="checkValue(item)">
<ion-avatar slot="start">
<img [src]="item.coverImage" />
</ion-avatar>
<ion-label>{{item.fullname}} <br>
<p>{{'Distance' | translate}} : {{item.distance}}Km</p>
</ion-label>
<ion-radio [value]="item.id"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
然后在您的控制器中,您可以像这样选择它
checkValue(value){
console.log("返回",值);
}
这对
我有用
postData={
"gender":''
}
<ion-list>
<ion-radio-group value="Male" >
<ion-list-header>
<ion-label style="font-size:10px;">Gender</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Male</ion-label>
<ion-radio slot="start" value="Male" (ionBlur)="postData.gender='Male'"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Female</ion-label>
<ion-radio slot="start" value="Female" (ionBlur)="postData.gender='Female'"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
这在 Ionic 5 上对我有用
<ion-radio-group name="iconSelect" ngDefaultControl [(ngModel)]="playerIcon" (ionChange)="setIcon()">
<ion-list-header>
</ion-list-header>
<ion-item>
<ion-label>
<ion-icon name="radio-button-off"></ion-icon>
Circle
</ion-label>
<ion-radio value="1" ></ion-radio>
</ion-item>
<ion-item>
<ion-label>
<ion-icon name="square-outline"></ion-icon>
Square
</ion-label>
<ion-radio value="2"></ion-radio>
</ion-item>
<ion-item>
<ion-label>
<ion-icon name="play"></ion-icon>
Triangle
</ion-label>
<ion-radio value="3" ></ion-radio>
</ion-item>
</ion-radio-group>
相关文章:
- 如何将ngrepeat下的ngmodel绑定到$scope
- 角度无线电按钮ng模型不起作用
- 角度 ng 检查不适用于无线电 - 2
- 如何使用javascript将textbox的值赋给ngModel textbox
- 无线电输入更改的jQuery事件未启动
- 通过ngModel访问html元素
- 自动完成jquery;t使用ngmodel和ngrepeat(angular)
- 用“;ngModel”;只有在散焦后才能显示其价值
- 通过单击链接(兄弟姐妹?)从无线电输入中获取id
- 如何使用Javascript为警报编写无线电组代码
- AngularJS-将数组值绑定到输入ngModel
- Angular.js指令格式化程序只调用过一次,或者如何告诉ngModel表现得像watchCollection
- ngRepeat中的动态ngModel对象属性
- 如何使用ngModel将自定义控件的提供程序扩展器分离到Angular 2中的单独文件中
- 如何在angular factory中定义ngModel
- 如何用ngclick替换ngmodel
- 当输入位于标签内时,更新无线电标签文本
- 如何从标签数据类型=“;无线电”;
- 获取检查输入无线电的标签
- 如何在离子无线电元件上使用ngModel