js手机通讯录

ionic页面··············································································

<ion-header>

  <ion-navbar color="saapp">
    <ion-title>
      联系人
    </ion-title>
  </ion-navbar>
</ion-header>


<ion-content>
<ion-searchbar //搜索框
class="searchbar"
placeholder="搜索..."
[(ngModel)]="myInput"
(ionInput)="getItems($event)"
(ionCancel)="onCancel($event)"
(ionFocus)="onFocus($event)"
[animated]='animate'
[cancelButtonText]='textValue'
[showCancelButton]="shouldShowCancel">

</ion-searchbar>

<!--第一个list列表-->
<div *ngIf="condition">
<ion-list *ngFor="let item of users" class="list-style">
 <h6> {{item.key}}</h6>//显示27个字母
 
  <ion-item *ngFor="let i of item.user" (click)="detail(i)">
 
   <ion-avatar item-left>
     <img src="{{i.picImg}}">
   </ion-avatar>
   
   <div class="list-name">
    <h2>{{i.displayName}}</h2>
    <!--<p style="float: left;margin-left: 10px;margin-top: 3px;"></p>-->
   </div>
   <span class="list-info" *ngIf="(i.orgName !=''||i.postion !='')">
    {{i.orgName}} <span *ngIf="i.orgName !=''&&i.postion!=''">/</span> {{i.postion}}
   </span>
    <!--<a href='tel:187-3686-7521' style="text-decoration: none;color: #36648B;">187-3686-7521</a>-->
  <!--<ion-icon name="arrow-forward" item-right></ion-icon>-->
  </ion-item>
</ion-list>
</div>
<!--第二个list列表-->
<div *ngIf="condition1">//当激活输入框时 开始搜索通讯录页面
<ion-list class="list-style">
  <ion-item *ngFor="let i of items" (click)="detail(i)">
 
   <ion-avatar item-left>
     <img src="{{i.picImg}}">
   </ion-avatar>
   
   <div class="list-name">
    <h2>{{i.displayName}}</h2>
    <!--<p style="float: left;margin-left: 10px;margin-top: 3px;"></p>-->
   </div>
   <span class="list-info">
    {{i.orgName}} <span *ngIf="i.orgName !=''&&i.postion!=''">/</span> {{i.postion}}
   </span>
    <!--<a href='tel:187-3686-7521' style="text-decoration: none;color: #36648B;">187-3686-7521</a>-->
  <!--<ion-icon name="arrow-forward" item-right></ion-icon>-->
  </ion-item>
</ion-list>
</div>

</ion-content>

typescript页面·····························································································

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TellInfor } from './tellInfor/tellInfor';
import * as _ from 'lodash';
import { apiService } from "../../api.service";//请求通讯录数据
import { translateService} from '../../../translate.service';
import { Storage } from '@ionic/storage';//注入本地存储


@Component({
 selector: 'tell-list',
templateUrl: 'tellList.html',
providers:[translateService],

})


export class TellList {
public showDetail = true;
searchQuery: string = '';
public showInfo=true;

public keys='ABCDEFGHIJKLMNOPQRSTUVWXYZ#'.split('');
public userlist = [];
public users = [];
  public items = [];
  public itemss=[];
  public reg=/^[a-zA-Z]+$/; 
myInput ='';
textValue='取消';
shouldShowCancel=false;
condition=true;
condition1=false;
animate=true;
 
  constructor( public navCtrl: NavController, public storage: Storage,public traSev: translateService) { 
 
this.initializeItems();

}
  
initializeItems() {
this.userlist = [];
this.users=[];
let userInfo;
//为每个对象添加一个属性
setTimeout(() => {
this.storage.get("userInfo").then((val) => {
userInfo= JSON.parse(val);
for(let i=0;i<userInfo.friends.length;i++){
userInfo.friends[i].picImg='assets/img/pic.png'
userInfo.friends[i].userPinyin=userInfo.friends[i].userPinyin.replace(/(^\s+)|(\s+$)/g,"")
if(userInfo.friends[i].userPinyin==''){
userInfo.friends[i].userPinyin=this.traSev.CC2PY(userInfo.friends[i].displayName)//没有获取到拼音的属性值并添加属性值
}
if(userInfo.friends[i].status==1){
userInfo.friends[i].status='在职'
}else{
userInfo.friends[i].status='离职'
}
}
//获取用户列表
this.users = _.cloneDeep(userInfo.friends);
this.items=_.cloneDeep(userInfo.friends);
this.itemss=_.cloneDeep(userInfo.friends);
//遍历所有数据放到对应的字母中
  for( let j=0; j<this.keys.length; j++){
    let obj={
    key:'',
    user:[]
    };
  obj.key=this.keys[j];
for(let i=0;i<this.users.length;i++){
 if(this.users[i].userPinyin.charAt(0).toUpperCase()==this.keys[j]){
  obj.user.push(this.users[i])
  }else if((!this.reg.test(this.users[i].userPinyin.charAt(0)))&&(this.keys[j]=='#')){//没有拼音的放到#中
obj.user.push(this.users[i])
}
}
this.userlist.push(obj);
    }
//遍历所有的,将空白的剔除掉
this.users=[];
    for(let i=0;i<this.userlist.length;i++){
    if(this.userlist[i].user.length!=0){
    this.users.push(this.userlist[i])
    }
    }
});
},50)
  }

//激活焦点
onFocus(ev:any){
this.condition=false;
this.condition1=true;
this.shouldShowCancel=true;
this.items=[];
}
//点击取消按钮
onCancel(ev:any){
this.condition=true;
this.condition1=false;
}
  //过滤数据
    getItems(ev: any) {
   let val = ev.target.value;
   if (val && val.trim()!=' ') {
this.items=this.itemss.filter((i) => {
if((i.personManagerNameCn.indexOf(val)>-1)||(i.displayName.indexOf(val)>-1)||(i.userPinyin.toLowerCase().indexOf(val.toLowerCase()) > -1)||(i.phone.indexOf(val)>-1)){
return i;
}
   })
   }else{
    this.items=[];
   }
 }
//响应事件
detail(item){
this.navCtrl.push(TellInfor,{detailMsg:item});
}

}