js手机通讯录

来源：互联网发布：audition for mac激活编辑：程序博客网时间：2024/06/06 13:44

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>

<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>

</div>
<span class="list-info" *ngIf="(i.orgName !=''||i.postion !='')">
{{i.orgName}} <span *ngIf="i.orgName !=''&&i.postion!=''">/</span> {{i.postion}}
</span>


</ion-item>
</ion-list>
</div>

<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>

</div>
<span class="list-info">
{{i.orgName}} <span *ngIf="i.orgName !=''&&i.postion!=''">/</span> {{i.postion}}
</span>


</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});
}

}

0 0