Exercise 31: Using Filters - jkneal/spring-angular-train GitHub Wiki

Learn how to use built in filters and create custom filters

1. In partials/products.html, add the following:

• In the product table, use a currency filter for displaying the product price

• After the h2 ‘Products’ header, add the content below. Make the first input bind to model property ‘productSearch’, and the select bind to model property ‘selectedCategory’. Next, specify ngOptions for the select that will apply a filter named ‘categories’ to the scope ‘products’ array. Finally select each category for the options (format is ‘label for value in array | filter’)

  <div class="col-md-3 col-md-offset-9 well">
   <label>Search Products</label><input class="form-control"/>
   <label>Select Category</label>
   <select class="form-control">
     <option value="">-- select category --</option>
   </select>
  </div>

• Now modify the ngRepeat directive that iterates over the products and creates rows to include two filters. Both will use the built in ‘filter’ filter. The first should pass ‘selectedCategory’ as an argument, and the second should pass ‘productSearch’

• In the h2 ‘Products’ header, change to display the length of the filtered products (hint: in the ngRepeat you can assign the filtered array to a scope variable with ‘value in filteredProperty = (property : filter1 | filter2 | …)’)

2. In app.js, add a filter named ‘categories’ to the ‘storeApp’ module. Implement the filter to return an array of distinct category values from the products

1. Start the training application and go to the app home page

2. Click on the link 'Angular Exercises', verify the page looks like the following:

   

3. Verify the ‘Select Category’ drop down has the option ‘Game Balls’

4. Now add additional products with different categories. As the products are added, verify the new category appears in the ‘Select Category’ select

5. Now select different categories from ‘Select Category’ and verify the products table only displays the products that have that category

6. Enter search terms in ‘Search Products’ and verify the products list is filtered to match your criteria (for ex., typing ‘IU’ should only show one record)

7. As the products list is filtered, verify the products header correctly reflects the number of items being displayed