Sharing Top Content from the Angular-sphere.

How to Implement a Search Filter on an HTML Table using AngularJS Filter

  • The first procedure shows you how to do a random search on the entire table and filter data (rows and columns) based on some entered values.
  • Now, in the above process, Angular will search for the matching letter (or letters) in the entire table, irrespective of any columns or types of values.
  • In the above example, the search filter is applied on the entire table.
  • Now, imagine you have hundreds or thousands of rows of data and the random search on the entire table can slow down the filtering process.
  • I have four columns in the table and I can select a particular column and filter data accordingly.

Here in this post I am sharing couple of simple examples on how efficiently you can implement a search filter on an HTML table using AngularJS filter.

I have written few posts here on my blog, explaining about Filters in AngularJS with examples. Here in this post I am sharing couple of simple examples on how efficiently you can implement a search filter on an HTML table using AngularJS filter.

What I personally like most about the Filters in AngularJS, is it simplicity. We’ll see why. Just stay with me.

The first procedure shows you how to do a random search on the entire table and filter data (rows and columns) based on some entered values.

See the Demo

I’ll create a simple HTML &lttable> with four columns. Then I’ll populate the &lttable> with data extracted from a JSON array.

I have shared few interesting articles and example on how bind data to different elements with a JSON array. Here is a list I want you check.

1) How to Bind JSON Array or Data to an HTML Table in AngularJS using ng-repeat

2) How to Use AngularJS ng-options to Populate JSON Array to a SELECT DropDownList

Next, I am using AngularJS ng-repeat directive to populate the data to the &lttable>.

&lt!DOCTYPE html> &lthtml> &lthead> &lttitle>&lt/title> &ltscript src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js”>&lt/script> &ltstyle> div, input{ font:15px Tahoma; margin:10px; } input { padding:5px 7px; } table, th, td { border:solid 1px #CCC; padding:1px 3px; font:15px Tahoma; } th { font-weight:bold; } &lt/style> &lt/head> &ltbody> &ltdiv ng-app=”myApp” ng-controller=”myController”> &lt!–THE SEARCH BOX–> Search &ltinput…

How to Implement a Search Filter on an HTML Table using AngularJS Filter