zoukankan      html  css  js  c++  java
  • Primeng UI框架ionic3 中下拉选择插件p-dropdown 插件的使用方法

    1、html引入:

    <p-dropdown float-right [options]="sortOption"  [(ngModel)]="sortNow" optionLabel="name" (onChange)="changeType()"></p-dropdown>

    2、在当前总模块或页面模块里引入模块:

    import {DropdownModule} from 'primeng/dropdown';

    3、在ts页面中初始化组件的值,并获取选中的值,并提交个后台:

    export class DerailParticulars {
        // 初始化下拉选项的值
        sortOption:Array<object> = [];
        // 初始化默认选中的下拉框的值(必须和this.sortOption内元素的数据类型一致)
        sortNow:any = {name:'最新作品',type:'newest'};
        ionViewDidLoad() {
            this.sortOption = [
                {name: '最新作品', type: 'newest'},
                {name: '热门作品', type: 'hot'}
            ];
        }
        changeType(){
            let type = this.sortNow.type;
            // 获取当前选中的下拉框的值对应的产品列表
            this.getProductList(type)
        }
        getProduceList(){
             // 获取产品列表请求
        }
    }        

    解释:1、this.sortNow 为当前选中的下拉框的值对应的this.sortOption中的某个对象,this.sortNow.type即为提交给后台的类型值。

         2、html里的optionLabel属性值应和初始化下拉框值列表的要显示的类型的属性名对应。如示例中的name属性。

    4、完结。

  • 相关阅读:
    [转]虚拟机下Redhat Linux系统的Mplayer安装实现
    结构定义中元素位置排列问题
    RPM 的介绍和应用
    yum 升级 rhe15
    Microsoft Access Data Types
    Eclipse配置SVN
    搭建本地YUM软件仓库
    2011年度最佳开源软件:Bossie奖结果公布
    Linux中文man在线手册
    PID算法
  • 原文地址:https://www.cnblogs.com/hsl-shiliang/p/9055491.html
Copyright © 2011-2022 走看看