ionic -- 仿微信通讯录

今天项目中需要做类似微信通讯录的好友通讯录，由于我们的项目中是用ionic中框架的，用jquery的插件库的时候，有的事件不能用，所以只能用ionic加angularjs的方法了，把自己写的过程做了一下记录，如下：

1. 我们需要把右侧的列表显示出来；这个列表是由数组中按用户名的首字母排列后的数组；
2. 把通讯录中所有的首字母包含英文字母放到数组中$scope.list；
$rootScope.selectuserfriend 数组放有用户信息的
如：$rootScope.selectuserfriend = [
{friendname:"李四"
friendnumber:"1111111"
friendportrait:"/usersys/images/myportrait/20170302111239800.jpg"
id:"201703021841496390"}
]
Controller代码：
// 遍历$rootScope.selectuserfriend数组，把数组中的‘李四’转变成拼音，使用这个函数pinyin.makePy();然后把一维数组变为二维数组
//pinyin.makePy() 这个函数是自己封装，之后会把连接加上；如果被检索的字母不在数组，则返回-1；
// $.inArray(被检索的字母，被检索的数组)；这个是jquery的方法
var Anyarry = ["A","B","C","D","E","F","G","H","I","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];

var $scope.list = [];
var $scope.sorted_users = [];
for (var i = 0; i < $rootScope.selectuserfriend.length; i++){
    var name = pinyin.makePy($rootScope.selectuserfriend[i].friendname); // 把‘李四’转换成LISI的拼音
    var letter = name[0].toUpperCase().charAt(0);                        // 获取friendname的第一个字符，这个例子为L
    if($.inArray(letter,Anyarry) === -1){                                // 判断这个letter是否为26个字母中的一个，如不是则放到#里面
      letter = "#";
    }
    if(tmp[letter] == undefined){                                        // 如果一维数组不存在；赋值[];
      tmp[letter]=[];
    }
    tmp[letter].push($rootScope.selectuserfriend[i]);                    // 插入到数组中
    if($.inArray(letter,$scope.list) == -1){                             
      $scope.list.push(letter);
    }
    // 按字母顺序排序
    $scope.list.sort();          
}
  $scope.sorted_users = tmp;
  // 点击小字母，瞄点到对应字母列表前
  $scope.gotoAddress = function (id){
      // 获取瞄点
      $location.hash(id);
      // 瞄点跳转
      $ionicScrollDelegate.anchorScroll();
      $scope.bigShowContent = id;
      $scope.isNotbigShow = true;
    };
  
HTML代码：

    
    
     
     
  // 字母列表
  
     
     

    
      
      

      
       
       
{{item}}
    
      
      
  
     
     
  // 点击显示大字母
  
     
     

      
      {{bigShowContent}}
     
     
  
     
     
      
      
  //  scroll="true" 这句话是必须要写得，因为不写的话，当瞄点到某个地方的时候，页面就无法上下滑动，回到顶部了
    
      
      
      
       
       

        
        
        
{{letter}}
 
           
 
             
           
 
           
 
            
{{addressItem.friendname}}
 
            
{{addressItem.friendnumber}}