Ionic2 Name Group Phone Address Book component implements the following functions
- Get phone Address Book data
- Data grouping display (Chinese and English correctly grouped)
- Click on the index to jump
- Scroll to special locations for special handling
- Contact Inquiry
Preview
Contacts.html
<ion-header> <ion-navbar> <ion-title>Select a contact</ion-title> </ion-navbar></ion-header><ion-contentpadding> <ion-searchbar [Debounce]="Searchdebounce" [(Ngmodel)]="Searchkey" [Showcancelbutton]="Shouldshowcancel" (ioninput)="Oninput ($event)" (Ioncancel)="OnCancel ($event)"> </ion-searchbar><ion-rowstyle="height:88%"> <ion-colcol-11 > <!--<div *ngif= "!contactlist| | Contactlist.length<=0 "><div > Phone contacts no contacts </div></div> <ion-scroll #scrollscrolly="true"style="height:100%"> <ion-item-group *ngfor="Let ContactItem of ContactList" > <ion-item-dividercolor="Light"id="Index_{{contactitem.letter}}">{{Contactitem.letter}}</ion-item-divider> <ion-item *ngfor="Let contact of contactitem.contact" (click)="SelectContact (Contact)"> <!--<ion-avatar item-start></ion-avatar> {{Contact.displayname}} <p>Mobile: {{Contact.phonenumbers[0].value}}</p> </ion-item> </ion-item-group> </ion-scroll> </ion-col> <ion-colcol-1 class="Index-num"> <div *ngfor="Let Indexitem of Contactindex" (click)="Gotoindex (indexitem)">{{Indexitem}}</div> </ion-col></ion-row> </ion-content>
Contacts.scss
.index-num{ color:blue; font-size:13px;}.scroll-content{ padding:0px!important}.red-index{ color:red;}
Contacts.component.ts
Import {Component, viewchild} from ' @angular/core '; import {navcontroller, navparams} from ' ionic-angular '; import {Con Tacts} from ' @ionic-native/contacts ', import {commonutil} from '. /common.util '; @Component ({selector: ' Contacts ', Templateurl: ' contacts.html '})/** contact component @author 0o aria メ*/export class C ontactscomponent {@ViewChild (' scroll ') scroll:any; Private Contactlist:any; Private contactindex:array<string>; Private searchkey:string; Private Shouldshowcancel:boolean; Public Iscordova:boolean; Public searchdebounce:number = 600; Public currentid:string; Private Isios:boolean; Constructor (private commonutil:commonutil, private contacts:contacts, public navctrl:navcontroller, public navparams: Navparams) {this.initdata (); /** Scroll to a specific location to do special processing demo */Ngafterviewinit () {if (!this.iscordova) {This.scroll.addScrollEventListener (even T) = = {Let Positionn = document.getElementById (' index_ ' + ' N '). OffsetTop; Let positions = document.getElementById (' index_ ' + ' S '). OffsetTop; if (Event.currentTarget.scrollTop > Positionn && event.currentTarget.scrollTop < positions) {Conso Le.log (' in module n '); This.currentid = ' N '; } else if (Event.currentTarget.scrollTop > Positions) {console.log (' in module S '); This.currentid = ' S '; } else {this.currentid = '; Console.log (' n Module not yet reached '); } }); }} initdata (): void {this.searchkey = ""; This.shouldshowcancel = true; This.iscordova = This.commonUtil.isCordova (); This.isios = This.commonUtil.isIOS (); This.contactindex = ' abcdefghijklmnopqrstuvwxyz '. Split ('); Alert (. Iscordova) if (This.iscordova) {Let opts = {filter: "", Multiple:true, Hasphone Number:true, fields: [' displayName ', ' name ']}; Let me = this; This.contacts.find ([' DisplayName ', ' name '], opts) then ((contactlist) = {Me.conTactlist = ContactList; Console.log (contactlist) Me.generatecontactgroup (contactlist); }, (Error) = {Console.log (error); }); } else {Let data = This.initbrowserdata (); This.generatecontactgroup (data); }}/** calls the callback method to transfer the selected contact information, and then jumps back to the previous page Demo:this.navCtrl.push (Contactcomponent,{callback:this.callbacktest,sco Pe:this}); Callbacktest (param):P romise<any>{let me = this; return new Promise (resolve = {Me.recommendphone = Param.phonenumbers[0].value;; Console.log (Me.recommendphone); Resolve (' success '); })} */selectcontact: void {if (!contact) contact = null; Let callback = This.navParams.get ("callback"); Let scope = this.navParams.get ("Scope"); if (!callback | |!scope) {alert (' callback function or scope is not provide! '); Return } callback.call (scope, contact). then (() = {This.navCtrl.pop (); }); } OninpuT ($event): void {console.log ($event); if (This.iscordova) {Let opts = {Filter:this.searchKey, multiple:true, Hasphonenumber:true, Fields: [' displayName ', ' name ']}; This.contacts.find ([' DisplayName ', ' name '], opts) then ((contactlist) = {This.contactlist = Contactli Qty Console.log (contactlist) This.generatecontactgroup (contactlist); }, (Error) = {Console.log (error); }); } else {Let data = This.initbrowserdata (); This.generatecontactgroup (data); }} onCancel ($event): void {}/** Contact Group */Generatecontactgroup (arr) {if (! String.prototype.localeCompare) {console.error (' localecompare function not found '); return []; }//entmp cnarray Let Enresult = This.sortencontacts (arr); Console.log (' Generatecontactgroup=>enresult ', enresult); Let Sortresult = enresult.entmp; Let Cnarray = Enresult.cnarray; Let Enkey =' ABCDEFGHIJKLMNOPQRSTUVWXYZ '. Split ('); Let letters = "*abcdefghjklmnopqrstwxyz". Split ('); Let en = "Ah eight cha ehegan xu ha ridiculed ka measles hallasan oh 妑 seven 呥 limitation it 穵 XI ya as". Split ('); for (Let i = 0; i < letters.length; i++) {let-letter = Letters[i].touppercase (); Let Curr; if (Sortresult[letter]) {curr = Sortresult[letter]; } else if (' * '! = Letters[i]) {Curr = Sortresult[letter] = []; } for (var j = 0; J < Cnarray.length; J + +) {if (!zh[i-1] | | | zh[i-1].localecompare (cnarray[j].displayn Ame, ' zh ') <= 0) && cnarray[j].displayname.localecompare (zh[i], ' zh ') = =-1) {Curr.push (cnarray[j]); }}} Let Contactresult = []; for (Let k = 0, K < enkey.length; k++) {Let item = Sortresult[enkey[k]]; if (item && item.length > 0) contactresult.push ({letter:enkey[k], contact:item}); } console.log (Contactresult); This.contactlist = Contactresult; return contactresult; }/** Contact English name first minuteGroup */sortencontacts (contactlist:array<any>) {Let en = [' A ', ' B ', ' C ', ' D ', ' E ', ' F ', ' G ', ' H ', ' I ', ' J ', ' K ', ' L ', ' M ', ' N ', ' O ', ' P ', ' Q ', ' R ', ' S ', ' T ', ' U ', ' V ', ' W ', ' X ', ' Y ', ' Z ']; Let entmp = {}; Let Cnarray = []; for (var i = 0; i < contactlist.length; i++) {if (This.isios && This.iscordova) {Contactlist[i].di Splayname = contactlist[i].name.formatted; } Let letter = Contactlist[i].displayname.touppercase (). charAt (0); if (En.indexof (letter) >= 0) {if (entmp[letter] = = undefined) {Entmp[letter] = []} EnT Mp[letter].push (Contactlist[i]); } else {Cnarray.push (contactlist[i])}} return {' entmp ': entmp, ' Cnarray ': Cnarray}; } gotoindex (letter): void {console.log (letter); Let target = document.getElementById (' index_ ' + letter); if (target) this.scroll._scrollcontent.nativeelement.scrolltop = Target.offsettop; } initbrowserdata (): Array<any> {return [{displayName: ' Jack ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' Mr. Chen ', Phonenumbe RS: [{value: ' 13626578952 '}]}, {displayName: ' Mr. Wu ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' Mr. Wang ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' Miss Lin ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' Mr. Fung ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' Chekiang ', phonenumbers: [{value: ' 1362657 8952 "}]}, {displayName: ' Huang Sheng ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' Jack ', phonenumbers: [{ Value: "13626578952"}]}, {displayName: ' Mike ', Phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' Ivin ' , phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' Kevin ', Phonenumbers: [{value: ' 13626578952 '}]}, { DisplayName: ' Who ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' Miss Zhang ', phonenumbers: [{value: ' 1362657895 2 "}]}, {DisplaynamE: ' Good ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' tag ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' OK ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' Jack ', phonenumbers: [{value: ' 1362 6578952 "}]}, {displayName: ' Fary ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' note ', PhoneNumber S: [{value: ' 13626578952 '}]}, {displayName: ' May ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' m Oon ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' month ', phonenumbers: [{value: ' 13626578952 '}]}, { DisplayName: ' Fai ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' Ming ', phonenumbers: [{value: ' 13626578952 ' }]}, {displayName: ' Guosheng ', phonenumbers: [{value: ' 13626578952 '}]}, {displayName: ' kity ', phonenumbers: [{valu E: "13626578952"}]}, {displayName: ' Marry ', phonenumbers: [{value: ' 13626578952 '}]},]; }}
Ionic2 + phone Address Book components grouped by name