ionic 2 起航 控件的使用 客户列表场景(三)
2024-09-29 10:05:57
我们来看看客户列表的搜索控件是怎么工作的吧。
1.打开customer.html
<ion-content>
<ion-searchbar
[(ngModel)]="searchQuery"
(input)="getItems($event)"
placeholder="客户名称或客户曾用名"></ion-searchbar>
2.ion-searchbar 就是我们的主角。下面有三个属性
[(ngModel)]="searchQuery" ,angular 2的一个双向绑定,跟后台customerPage类的的searchQuery对应着
(input)="getItems($event)" (input)是一个事件,就是输入的时候触发后台一个getItems()的方法。$event事件的参数
placeholder="客户名称或客户曾用名",这里就是高大上的水印文字啦。
ok,我们再看看后台customer.ts做了什么?
1.searchQuer:string='' ,这里是CustomerPage的一个属性。:string 类型是string型的
2.getItems(searchbar),这里是一个方法,每当输入的时候便会触发
3. this.items = this.items.filter((v) => {
if (v.toLowerCase().indexOf(q.toLowerCase()) > -1) {
return true;
}
return false;
})
这里就是触发后,进行搜索过来items的列表。
下一章,我会继续介绍列表的刷新事件和下拉加速数据事件,欢迎持续关注
最新文章
- PHP计算一年有多少周,每周开始日期和结束日期
- OpenGL基础图形的绘制
- IntelliJ IDEA License Server本地搭建教程
- 转:鏖战双十一-阿里直播平台面临的技术挑战(webSocket, 敏感词过滤等很不错)
- 在树莓派上 搭建sqlite数据库
- 1037: [ZJOI2008]生日聚会Party - BZOJ
- C语言---注释
- 小技巧之指定refer
- PHP错误Warning: Cannot modify header information - headers already sent by解决方法
- c# 值传递 引用传递
- ubuntu安装hadoop 若干问题的解决
- vs调试MEX文件
- 第三十七节,hashlib加密模块
- Linux下gcc和g++的区别
- 安装vmtools之后任然不能在虚拟机和主机之间复制粘贴的问题
- 流程与IT管理是未来IT行业发展的必经之路
- Java测试的题目感想
- js获取url参数值,并解决中文乱码
- java的几种对象(PO,VO,DAO,BO,POJO,DTO)解释
- php之memcached存储session配置、存储、获取