Feature request: Indexed list (vertical alphabet selector)

ionic-v1
4

The bug in Scrolling has since been resolved (even though the implementation of the scroll delegate is set to change going into the 1.0 beta) so it’s possible to make something like this yourself.

The following is tested in 0.9.27.

In your list you can add an anchor to the divider ( so <ion-item type="divider" id="index_A">A</ion-item> etc).

Then create the elements that will trigger the jump, so something like:

<ul>
<li><a ng-click="gotoList('index_A')">A</li>
<li><a ng-click="gotoList('index_B')">B</li>
<!-- etc -->
</ul>

Style this with CSS so it’s vertical and it remains to the right of the viewport.

Finally, implement a scroll function in your controller with:

.controller('MyCtrl', function($scope, $stateParams, $location, $ionicScrollDelegate) {
  $scope.gotoList = function(id){
    $location.hash(id);
    $ionicScrollDelegate.anchorScroll();
  }
})

Good luck!

2 Likes