Ionic2 + phone Address Book components grouped by name

Source: Internet
Author: User
Tags export class

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.