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、完结。
Primeng UI框架ionic3 中下拉选择插件p-dropdown 插件的使用方法的更多相关文章
- 前端Js框架 UI框架汇总 特性 适用范围 选择
身为一个资深后端工程师,面对层出不穷的前端框架,总让人眼花缭乱,做一个综合解析贴,从全局着眼,让我们明白各种前端框架的应用范围,为如何选择前端框架,从不同的维度提供一些线索,做为一个长期优化贴,欢迎指 ...
- ASP.NET MVC页面UI之联动下拉选择控件(省、市、县联动选择)
地区选择操作在WEB应用中比较常见的操作,本文在.net mvc3下实现了省市县三级联动选择功能. 本文博客出处:http://www.kwstu.com/ArticleView/admin_2013 ...
- Primeng UI框架中 分页组件用法
1.在当前模块或当前页面的对应的module.ts文件中引入相应组件模块,如:core.module.ts模块. import { PaginatorModule } from 'primeng/pr ...
- MVC4中下拉菜单和单选框的简单设计方法
举例一: @Html.LabelFor(model => model.Gender) @Html.DropDownListFor(model => model.Gender, new[] ...
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
- jQuery UI 多选下拉框插件:jquery-ui-multiselect
前一个项目,由于项目需求,需要大量使用到下拉多选框,而由于本人又不会写有关 CSS 样式,所以,便上网找到了这个 jQuery 插件:jquery-ui-multiselect .该款插件提供了基本下 ...
- 前端UI框架选择区别对比推荐
UI选择务必慎重,货比三家. 弱水三千只取一瓢:弱水三千只取一瓢,源起佛经中的一则故事,警醒人们在一生中可能会遇到很多美好的东西,但只要用心好好把握住其中的一样就足够了 老牌构建于jQuery框架之上 ...
- ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- 前端MVC框架、类库、UI框架选择
CSS预处理器sass(基于Ruby服务端版)less(客户端版:基于js; 服务端版:基于nodejs) 前端UI框架JqueryMiniUI: http://www.miniui.com/(适用于 ...
随机推荐
- sed使用---转义字符
https://blog.csdn.net/wangcg123/article/details/50667883 单引号里面,s表示替换,三根斜线中间是替换的样式,特殊字符需要使用反斜线”\”进行转义 ...
- 设置flex 为1
父级的宽度: 375 用来每个子元素的宽度:40 设置了 flex:1,每个子元素的宽度为125 125*3= 375, 设置flex=1后子元素会平均的分配父级元素剩下的宽度
- 2、pycharm中设置pytest为默认运行
1.打开File-setting 2.打开Tools-Python Integrated Tools 3.找到Default test runner选项,在下拉框中选择py.test 4.点Apply ...
- AGC016题解
呼我竟然真的去刷了016QwQ[本来以为就是个flag的233] 感觉AGC题目写起来都不是很麻烦但是确实动脑子qvq[比较适合训练我这种没脑子选手] 先扔个传送门:点我 A.Shrinking 题意 ...
- C#调用谷歌翻译API
原资料为网上找到的原稿为:http://www.cnblogs.com/marso/p/google_translate_api.html(此处只做个人笔记参考) 主要分两块:通过WebRequest ...
- nodejs部署配置pm2
高大上先上部署node方式: 直接通过node app来启动,如果报错了可能直接停在整个运行, supervisor感觉只是拿来用作开发环境的. 目前似乎最常见的线上部署nodejs项目的有forev ...
- promise函数
一.promise函数是干什么的 promise函数是解决异步编程调用代码逻辑编写过于复杂的问题的,当网络请求非常复杂时,就会出现回调地狱,这样如果将这些代码写在一起就会看起来很复杂,且不利于阅读,如 ...
- OpenCV—Python 轮廓检测 绘出矩形框(findContours\ boundingRect\rectangle
千万注意opencv的轮廓检测和边缘检测是两码事 本文链接:https://blog.csdn.net/wsp_1138886114/article/details/82945328 1 获取轮廓 O ...
- 各大漏洞平台及SRC的区别和如何批量刷漏洞
批量刷漏洞: 01刷指纹->02刷原始漏洞->03刷CMS->04刷指定政府.教育->05刷众测平台->06刷SRC->07刷国内外.活动 搜索引擎: 百度.goo ...
- 【靶场练习_upload-labs复现】Pass01-020
文件上传本是要命,挂马成功率更是随缘,我太难了Orz Pass-01:JS <?php phpinfo();?> 1.函数重写: 2.禁用js: Pass-02:MIME Type 修改M ...