AngularJS - Add Dynamic and Custom Filters

AngularJS - Add Dynamic and Custom Filters

Add components for currency, style, and to dynamically filter the list.

You will learn

In this tutorial series, we will explore another technology for Single Page Application (SPA) development - AngularJS (or just Angular). Angular is a popular web framework in North America, and is used by many companies for both internal and client-facing systems. These tutorials will parallel our SAPUI5 tutorials, building a visual interface using Angular, and connecting it to an OData back end service.

Details

AngularJS series

Start working with other Angular components, starting with the AngularJS Filter. In this tutorial, we will:

Convert a number into a currency

Create a filter for our list

Write a custom filter for Available and Discontinued

Convert a number into a Currency

We start by looking at our current list of items. The currency is currently displayed with four decimal places. This is how the data comes from the OData repository.

Next, we will add the field productFilter to our $scope. Open the main.js file, then scroll down a few lines. This will attach the input text field to a variable in JavaScript that we can use later. Insert the following JavaScript line:

$scope.productFilter = undefined;

Finally, we need to set up the filter. Go back to the index.html file, and scroll down to the <div class="container-fluid"> tag. Under that tag you will see a <button> tag. Update the ng-repeat attribute to look like this:

ng-repeat="product in productList | filter:productFilter

Run your application. The title bar should have a new text input field, like this:

If you type in a few characters, you will see the list dynamically change.

Fix the item count

Only one problem. Now, our Items count, in the title bar, isn’t correct!

The item count is still showing the number of total items, not the number of items after filtering. To fix this, we will update the item count with a function that counts only the filtered items.

First, we will define a function that counts the number of visible items.

Open your main.js file. At the end of the file, add the following function:

Open the index.html file, and scroll down to the <nav> section, to the line <p class="navbar-text">. Replace the productList.length with the following new HTML

itemCount()

Now run your application. As you type in a filter, the item count will change as the list changes

Write a custom filter for Available/Discontinued

Next, we will replace our logic in the HTML with a new Discontinued custom filter.

This filter will take the boolean value in our product.Discontinued, and turn it in to a word. Although the current logic works fine (and is widely used), this will give you an example of a custom filter.

Start by adding the filter to your Angular module definition.

Open the main.js file, and in the top, add the following code:

.filter('discontinued', discontinuedFilter);

IMPORTANT! Don’t forget to remove the semicolon from the line above this one!

Next, we will add the filter function. Scroll to the bottom of the file, and add the following JavaScript:

Open your index.html file, and scroll down to the <button> section. Replace the product.Discontinued logic with the following line:

<p>{{product.Discontinued | discontinued}}</p>

Scroll down to the modal dialog. In the line that starts with {{selectedProduct.Discontinued, replace the HTML with the following:

{{selectedProduct.Discontinued | discontinued}}

Now run your application. The text should be exactly the same, but the new filter will be doing all the work.

Adding the CSS style back to the Discontinued label

Remember in our early application, the Available and Discontinued label were both colored. We want to put that back. To do that, we will modify our filter to add a style class.

Open your index.html file, and scroll down to the <div class="list-group"> section. Find the line that displays the Discontinued state (<p>{{product.Discontinued | discontinued}}</p>) and replace it with this new HTML: