【Ionic3】ion-multi-picker placeholder
程序员文章站
2022-06-01 11:03:02
...
How to set ion-multi-picker's default value ? Using placeholder. Here is what I do.
html :
<button ion-item>
<ion-label>Height</ion-label>
<ion-multi-picker class="userHeight" placeholder='{{defaultHeight}}' item-content [multiPickerColumns]="heightChoose" [showReset]="true"></ion-multi-picker>
</button>
ts :
export class PersonalInfoPage {
// Height:
defaultHeight:string; //default value
heightChoose:any[]; //users can choose from options
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.heightChoose = [
{
options: [
{ text: '100', value: '1' },
{ text: '101', value: '2' },
{ text: '102', value: '3' },
{ text: '103', value: '4' },
{ text: '104', value: '5' },
{ text: '105', value: '6' },
{ text: '106', value: '7' },
{ text: '107', value: '8' },
{ text: '108', value: '9' },
{ text: '109', value: '10' }],
},
{
options: [{ text: 'cm', value: '1'}],
}
];
}
ionViewDidLoad() {
console.log('ionViewDidLoad PersonalInfoPage');
this.defaultHeight='160cm';
}
}
Let's see the picture.
If you want to change "CANCEL" , " RESET" , " DONE" into Chinese , you can do in this way .
<ion-multi-picker class="userHeight" placeholder='{{defaultHeight}}' item-content [cancelText]="'取消'" [doneText]="'完成'" [resetText]="'重置'" [multiPickerColumns]="heightChoose" [showReset]="true"></ion-multi-picker>
Thanks for your reading.
推荐阅读
-
HTML5里的placeholder属性使用实例和美化显示效果的方法
-
HTML5 input placeholder 颜色修改示例
-
HTML 5 input placeholder 属性如何完美兼任ie
-
IE下支持文本框和密码框placeholder效果的JQuery插件分享
-
让IE下支持Html5的placeholder属性的插件
-
jquery 判断是否支持Placeholder属性的方法
-
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
-
jquery实现(textarea)placeholder自动换行
-
html5 placeholder 属性 并检测浏览器是否支持这个属性
-
Sencha toucha2中设置文本框默认提示文字的PlaceHolder属性的颜色