Angularjs Ionic

Ionic alpha scroll with filter search

Ionic alpha scroll with filter search

Ionic alpha scroll with filter search, I am using Ionic and angularjs for my application, I have used ion-alpha-scroll package to group by my products in alphabetical order. Its working fine to list out product in alphabetical order and in right side it will show alphabets by clicking alphabet it will go to the product with the start of selected alphabet. But In my case I want to make search filter for my products.

I am using default $ionicFilterBar to filter my products. When I search products, $ionicFilterBar update function gives filtered results but its not binding in my ion-alpha-scroll package. I cannot refresh ion-alpha-scroll because I have checkbox for my products, So If I refresh the selected check boxes become false.

So after some research have implemented custom Ionic alpha scroll with search filter :

First Step

Store Items in variable in controller :

Step 2 : Write Default $ionicFilterBar  function in controller

Step 3 : Inject the below providers in your controller

Step 3 : Write function to get Alphabets in controller

Step 4  : Write groupBy filter in controller

To implement this please call underscore-min.js in index.html

Step 5 : Call Items in your index.html

My html

Step 6 : Write gotoList function in your controller, Which will take the user to on click particular index.

Ionic alpha scroll Output :

Ionic alpha scroll with filter search

When user press “D” from right alphabet order :

Ionic alpha scroll with filter search

When user try filter by entering text

Ionic alpha scroll with filter search

Thanks for reading this article.
Hope it will help some one.