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、完结。

Primeng UI框架ionic3 中下拉选择插件p-dropdown 插件的使用方法的更多相关文章

  1. 前端Js框架 UI框架汇总 特性 适用范围 选择

    身为一个资深后端工程师,面对层出不穷的前端框架,总让人眼花缭乱,做一个综合解析贴,从全局着眼,让我们明白各种前端框架的应用范围,为如何选择前端框架,从不同的维度提供一些线索,做为一个长期优化贴,欢迎指 ...

  2. ASP.NET MVC页面UI之联动下拉选择控件(省、市、县联动选择)

    地区选择操作在WEB应用中比较常见的操作,本文在.net mvc3下实现了省市县三级联动选择功能. 本文博客出处:http://www.kwstu.com/ArticleView/admin_2013 ...

  3. Primeng UI框架中 分页组件用法

    1.在当前模块或当前页面的对应的module.ts文件中引入相应组件模块,如:core.module.ts模块. import { PaginatorModule } from 'primeng/pr ...

  4. MVC4中下拉菜单和单选框的简单设计方法

    举例一: @Html.LabelFor(model => model.Gender) @Html.DropDownListFor(model => model.Gender, new[] ...

  5. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

  6. jQuery UI 多选下拉框插件:jquery-ui-multiselect

    前一个项目,由于项目需求,需要大量使用到下拉多选框,而由于本人又不会写有关 CSS 样式,所以,便上网找到了这个 jQuery 插件:jquery-ui-multiselect .该款插件提供了基本下 ...

  7. 前端UI框架选择区别对比推荐

    UI选择务必慎重,货比三家. 弱水三千只取一瓢:弱水三千只取一瓢,源起佛经中的一则故事,警醒人们在一生中可能会遇到很多美好的东西,但只要用心好好把握住其中的一样就足够了 老牌构建于jQuery框架之上 ...

  8. ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  9. 前端MVC框架、类库、UI框架选择

    CSS预处理器sass(基于Ruby服务端版)less(客户端版:基于js; 服务端版:基于nodejs) 前端UI框架JqueryMiniUI: http://www.miniui.com/(适用于 ...

随机推荐

  1. 脚本_根据 md5 校验码,检测文件是否被修改

    #!bin/bash#功能:根据 md5 校验码,检测文件是否被修改#作者:liusingbon#本示例脚本检测的是/etc 目录下所有的 conf 结尾的文件,根据实际情况,您可以修改为其他目录或文 ...

  2. Djano中static和media文件路径的设置

    对于常用的css.js.image和常用的工具类在django项目中要设置一个全局的路径,对所有的app都可以访问到这个路径下的文件 1在django项目的setting文件中设置对应的static和 ...

  3. Sass函数-join()函数

    join() 函数是将两个列表连接合并成一个列表. >> join(10px 20px, 30px 40px) (10px 20px 30px 40px) >> join((b ...

  4. java类使用

    package java04; /* * 通常情况下,一个类不能直接使用,需要创建一个对象,才能使用 * *步骤: * 1.导包:就是指出需要使用的类在什么位置 * import 包名称.类名称: * ...

  5. center os 下redis安装以及基本使用

    解压并进入其目录 make cd src make install 默认情况,Redis不是在后台运行,我们需要把redis放在后台运行 vim /usr/local/redis/etc/redis. ...

  6. Fiddler的详细介绍

    Fiddler的详细介绍 一.Fiddler与其他抓包工具的区别 1.Firebug虽然可以抓包,但是对于分析http请求的详细信息,不够强大.模拟http请求的功能也不够,且firebug常常是需要 ...

  7. js中数组Array 详解

    unshift:将参数添加到原数组开头,并返回数组的长度    pop:删除原数组最后一项,并返回删除元素的值:如果数组为空则返回undefined    push:将参数添加到原数组末尾,并返回数组 ...

  8. html中 的method=post和method=get的区别

    1. get是从服务器上获取数据,post是向服务器传送数据. 2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过 ...

  9. javaScript的关键字与保留字

    JavaScript 关键字: break case catch continue default delete do else finally for function if in instance ...

  10. centos7下安装storm步骤

      前言 真是后知后觉,最近忙也要学习,把以前丢的都要拾起来.原理懂不懂也把环境搭起来学习.   环境  centos7 jdk 1.8 zookeeper 3.4.13 storm 1.2.2 安装 ...