Ionic实现IOS联系人列表

我们要实现像IOS那样的联系人列表，刚开始拿到这个需求的时候是一个头，两个大，无从下手啊，最后还是想着搜搜网上是不是有人实现这样的功能了，结果还真让找到了，好了，上代码
在Controller里加入数据跟处理

.controller('DashCtrl', function($scope, $location, $ionicScrollDelegate) {
  $scope.users  = [   
    {     
      "_id": "53fceb7ef214c5316e93e7c8",     
      "first_name": "Francis",     
      "last_name": "Hill"   
    },   
    {     
      "_id": "53fceb7e4a46965ec9f1d08f",     
      "first_name": "Lessie",     
      "last_name": "Caldwell"   
    },   
    {     
      "_id": "53fceb7e502379253e2e7b0d",     
      "first_name": "Alyson",     
      "last_name": "Woodward"   
    },   
    {     
      "_id": "53fceb7ee548c39f3d6d651e",     
      "first_name": "Malone",     
      "last_name": "Becker"   
    },   
    {     
      "_id": "53fceb7e216dabb188bf3cec",     
      "first_name": "Terrell",     
      "last_name": "Stein"   
    },   
    {     
      "_id": "53fceb7ed393a16f29b2dc78",     
      "first_name": "Laurie",     
      "last_name": "Ayers"   
    },   
    {     
      "_id": "53fceb7e956d8f3aaf33634e",     
      "first_name": "Rowland",     
      "last_name": "Rosario"   
    },   
    {     
      "_id": "53fceb7ec92ee5342dc5c5df",     
      "first_name": "Laurel",     
      "last_name": "Hobbs"   
    },   
    {     
      "_id": "53fceb7ed624f8dd26ebb171",     
      "first_name": "Kristie",     
      "last_name": "Barker"   
    },   
    {     
      "_id": "53fceb7e14cb861f7e72c202",     
      "first_name": "Riley",     
      "last_name": "Ortiz"   
    },   
    {     
      "_id": "53fceb7ecfe77b71b7a5d4fe",     
      "first_name": "Morin",     
      "last_name": "Terry"   
    },   
    {     
      "_id": "53fceb7e671c72b0dacb44f5",     
      "first_name": "Ida",     
      "last_name": "Haney"   
    },   
    {     
      "_id": "53fceb7e91f884a9dea10cb7",     
      "first_name": "Boyd",     
      "last_name": "Davis"   
    },   
    {     
      "_id": "53fceb7e91a18e0fd67cc7e6",     
      "first_name": "Milagros",     
      "last_name": "Blair"   
    },   
    {     
      "_id": "53fceb7e25edb893c03c320f",     
      "first_name": "Marissa",     
      "last_name": "Howell"   
    },   
    {     
      "_id": "53fceb7e67e3275edd8b577d",     
      "first_name": "Whitehead",     
      "last_name": "Sosa"   
    }];
    var users = $scope.users;
    $scope.alphabet = iterateAlphabet();

  //Sort user list by first letter of name
    var tmp={};
    for(i=0;i<users.length;i++){
      var letter=users[i].first_name.toUpperCase().charAt(0);
      if( tmp[ letter] ==undefined){
        tmp[ letter]=[]
      }
      tmp[ letter].push( users[i] );
    }
    $scope.sorted_users = tmp;

  //Click letter event
    $scope.gotoList = function(id){
      $location.hash(id);
      $ionicScrollDelegate.anchorScroll();
    }

  //Create alphabet object
  function iterateAlphabet()
  {
     var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
     var numbers = new Array();
     for(var i=0; i<str.length; i++)
     {
        var nextChar = str.charAt(i);
        numbers.push(nextChar);
     }
     return numbers;
  }
  $scope.groups = [];
  for (var i=0; i<10; i++) {
    $scope.groups[i] = {
      name: i,
      items: []
    };
    for (var j=0; j<3; j++) {
      $scope.groups[i].items.push(i + '-' + j);
    }
  }
  
  /*
   * if given group is the selected group, deselect it
   * else, select the given group
   */
  $scope.toggleGroup = function(group) {
    if ($scope.isGroupShown(group)) {
      $scope.shownGroup = null;
    } else {
      $scope.shownGroup = group;
    }
  };
  $scope.isGroupShown = function(group) {
    return $scope.shownGroup === group;
  };
})

接下来上CSS样式

.alpha_sidebar{
  position: absolute;
  top:50px;
  right:  10px;
  z-index: 100000
}
.alpha_sidebar li{
  color: #49afcd;
  margin-bottom: 6px;
  cursor: pointer;
}
.alpha_list{
  padding-right: 22px;
}

最后上Html显示列表

<ion-view view-title="Dashboard">
  <ion-content scroll="true" class="has-header" padding="true">
    <div data-ng-repeat="(letter, authors) in sorted_users" class="alpha_list">
    <ion-item class="item item-divider" id="index_{{letter}}">
      {{letter}}
    </ion-item>
    <ion-item ng-repeat="author in authors">
      {{author.first_name}} {{author.last_name}}
    </ion-item>
    </div>
  </ion-content>
  <ul class="alpha_sidebar">
    <li ng-click="gotoList('index_{{letter}}')"ng-repeat="letter in alphabet"> 
      {{letter}}
    </li>
  </ul>
</ion-view>

显示效果如下

屏幕快照 2016-10-24 上午9.11.32.png