Home / AngularJS / List search filter using AngularJS

List search filter using AngularJS

List search filter has always been complicated that involves looking up for data attributes and going through a long list of words in a page. With AngularJS there is absolutely no big codes and complications. The approach is straight forward with use of ng-model for data binding.

Let’s quickly get started with the view. We are going to list country names and filter them by keywords using the filter module

Mark up

* Assign an app name and a controller for <body> tag
* Set up ng-model for the search text box
* Set up ng-repeat for the country names
  ng-repeat=”country in countrylist | filter: searchFilter”
  where countrylist is an array and searchFilter is the ng-model

Script

* Fetch the country list from a json file using $http get method
* Bind the array of countries to countrylist in the view

Sample JSON

Additionally I have used Slimscroll plugin to enable a beautiful scrollbar for the countrylist.

That’s it!

Download   Preview

About Ashik

I am a Full Stack Developer and love to work on APIs and Apps. Hardcore lover of Ionic and Laravel <3

Do you wan't to get notified?

I will not spam your inbox. I will only send email whenever I publish a new article or to share information about technology

You have Successfully Subscribed!