9、搜索 :ion-searchbar
/* ---html----*/ <ion-searchbar [(ngModel)]="searchQuery" (input)="getItems($event)"></ion-searchbar>
<ion-list>
<ion-item *ngFor="#item of items">
{{ item }}
</ion-item>
</ion-list> /* ---html----*/
/* ---js----*/ import {Page} from 'ionic-angular'; @Page({
templateUrl: 'build/pages/tabs/tabs.html',
}) export class TabsPage { constructor() {
this.searchQuery = '';
this.initializeItems();
} initializeItems() {
this.items = [
'Amsterdam',
'Bogota',
];
} getItems(searchbar) {
//给作用域 items 一个默认值。
this.initializeItems();
//获取文本框里的 value
var q = searchbar.value; //如果值是空字符串,则不过滤项目
if (q.trim() == '') {
return;
}
//否则 过滤一下 this.items
this.items = this.items.filter((v) => {
if (v.toLowerCase().indexOf(q.toLowerCase()) > -1) {
return true;
}
return false;
})
} } /* ---js----*/
还有更多的样式http://ionicframework.com/docs/v2/api/components/searchbar/Searchbar/
9、搜索 :ion-searchbar的更多相关文章
- 猫猫学iOS 之微博项目实战(5)微博自己定义搜索框searchBar
猫猫分享.必须精品 原创文章.欢迎转载. 转载请注明:翟乃玉的博客 地址:http://blog.csdn.net/u013357243 一:效果 用UITextField简单定义一个搜索框 二:调用 ...
- AJ学IOS 之微博项目实战(5)微博自定义搜索框searchBar
AJ分享,必须精品 一:效果 用UITextField简单定义一个搜索框 二:调用: 调用的代码,很简单,直接init就可以,以后加功能自己添加就行了. - (void)viewDidLoad { [ ...
- 【IOS开发】搜索和排序(好友列表,通讯录的实现,searchbar)
一.效果图: 二.概述 实现一个好友列表,可以分为男女两个选项,并且实现搜索和排序功能.我的数据是放在plist文件中. 三.代码简述 代码结构如图,首先自定义一个Cell. cell.h #impo ...
- iOS--- UITableView + UISearchDisplayController - - - - -实现搜索功能
iOS中UISearchDisplayController用于搜索,搜索栏的重要性我们就不说了,狼厂就是靠搜索起家的,现在越来越像一匹没有节操的狼,UC浏览器搜索栏现在默认自家的神马搜索,现在不管是社 ...
- searchBar控件
那就先了解一下UISearchBar控件吧! UISearchBar控件就是要为你完成搜索功能的一个专用控件.它集成了很多你意想不到的功能和特点! 首先,还是来普及一下UISearchBar控件API ...
- searchbar的使用介绍
searchBar的使用介绍 首先如何创建一个SearchBar实例: self.searchBar = [[UISearchBar alloc] initWithFrame: CGRectMake( ...
- iOS开发UI篇 -- UISearchBar 属性、方法详解及应用(自定义搜索框样式)
很多APP都会涉及到搜索框,苹果也为我们提供了默认的搜索框UISearchBar.但实际项目中我们通常需要更改系统默认搜索框的样式.为了实现这一目标,我们需要先搞懂 UISearchBar 的属性及方 ...
- ios UISearchDisplayController 实现 UITableView 搜索功能
UISearchDisplayController 是苹果专为 UITableView 搜索封装的一个类. 里面内置了一个 UITableView 用于显示搜索的结果.它可以和一个需要搜索功能的 co ...
- UISearchBar去掉SearchBar上面两条分割线
设置之前: 设置之后: 代码如下: // // ViewController.m // UISearchBarDemo // // Created by 思 彭 on 17/3/24. // Copy ...
- iOS 搜索条使用详解
在ios开发中搜索条的使用挺常见的,不过之前一直没用到也没细细研究,最近做外包项目的时候刚好用到,在这里记录一下使用的过程,只要理解了原理,其实还是比较简单的!上传的图片有点大,刚好可以看清楚它的使用 ...
随机推荐
- Spring容器管理对象和new对象
问题:一个业务类交给spring管理,并自动注入了其他业务类作为属性,方法中通过全局属性调用其他业务类的方法.当该业务类是通过new获取的情况下,该实例的属性会是null(不存在依赖注入实例),调用方 ...
- 第五篇 Python内置函数
内置函数 abs() delattr() hash() memoryview() set() all() dict() help() min() setattr() any() dir() ...
- day02.2-列表内置方法
列表——list的定义:test = [1,12,9,"age",["zizai","jiapu"],"alex"] 特 ...
- 搭建jumpserver堡垒机
环境 系统: CentOS 7 IP: 192.168.244.144 关闭 selinux 和防火墙 # CentOS 7 $ setenforce 0 # 可以设置配置文件永久关闭 $ syst ...
- const 迭代器和 const_iterator (vector/set/map)
vector: 如同一般复合类型一样,vector 迭代器也可以声明成: const vector<int>::iterator it1 = v.begin(); vector<in ...
- Ubuntu 安装后的配置及美化(一)
Ubuntu 安装后的配置及美化(一) 记录一下 完成后的主界面. 配置 1.更新源为阿里云 找到 软件和更新 选项,更新源为阿里云的源. 在 其他软件 中将 Canonical合作伙伴 打上勾. 然 ...
- loj #2051. 「HNOI2016」序列
#2051. 「HNOI2016」序列 题目描述 给定长度为 n nn 的序列:a1,a2,⋯,an a_1, a_2, \cdots , a_na1,a2,⋯,an,记为 a[1: ...
- 【RMAN备份】数据库备份
转载请注明地址. 备份片文件名通配符: %c 备份片的拷贝数 %D 位于该月中的第几天 (DD) %M 位于该年中的第几月 (MM) %F 一个基于DBID 唯一的名称,这个格式的形式为c-IIIII ...
- 关于 FPDF、HTML2PDF里的中文、日文、韩文等双字节字符换行问题
最近使用 FPDF.HTML2PDF导出中文PDF,发现表格里的数据不会自动换行,格式乱了,看了一下手册,有个 functionCell()可以设置换行,但是设置了半天也没反应!最后搞了一个笨办法完美 ...
- ICEM二维网格
非结构网格 结构网格 拓扑 拓扑完建立part边界条件,然后创建block 拓扑完后进行边界条件关联 全局网格设置