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