AngularJS Data Grid with Filters

AngularJS ability to bind a model to a view can be leveraged to design very interactive user interfaces that can help improve the user experience. A very common user interface enhancement is to allow users to filter the data that they are working on.  We can easily build such feature in our applications with the use of the $filter service.

To illustrate the use of the $filter service, we can build a basic vehicle inventory on a data grid. We need the user to filter on this data by typing a text on a particular column. We can enable this by adding text boxes on the header of each column on the grid. The purpose of the text boxes is to allow the users to type text that can be used to filter that data that is currently displayed.

Looking at the AngularJS controller (gridCtrl), we see that we are using the filteredList property as the model for our view. On the initial load, the filteredList contains all the current items. As the user types information on any of the header text boxes (onchange), we filter the data by using the $filter service and passing the search model which binds to each text box. This enables the $filter service to match only the items that have the filter criteria. This also allows us to apply multiple search filters. For example, we could look for all 1999 Toyota vehicles only, and the result should look as follows:

Data Grid with Filters

This approach allows us to filter data from the data grid without any server side traffic. This approach is only recommended for data sets of a few hundreds. For much larger data sets, a server side filter would be recommended.

I hope that provides some ideas on UI designs with AngularJS.