你的位置:首页 > 操作系统

[操作系统]ionic 2 起航 控件的使用 客户列表场景(三)


  我们来看看客户列表的搜索控件是怎么工作的吧。

  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的列表。

 

 

下一章,我会继续介绍列表的刷新事件和下拉加速数据事件,欢迎持续关注