MEAN Stack – Customer Search using AngularJS Filters – Day 18

The MEAN Challenge Continues!

This video is part of the 30 Day MEAN Stack Honolulu Challenge

In this video we’ll add a search input and new customer button to our List Customers Page. We’ll also use AngularJS Filters to connect our search input to our list of customers, to let us filter through our list of customers.

We look at:
– Continuing to set up the List Customers Page
– Determining the grid layout for mobile vs. larger devices
– Using col-xs and col-sm to change grid sizes based on device size
– Finding and using Bootstrap classes for input-groups for our search bar
– Adjusting the size of input-groups and buttons to align to the wireframe
– Connecting the search input to the list of customers
– Finding Angular Filter documentation on the AngularJS website
– Using Angular Filter syntax to add filtering functionality to our app
– Adding place-holder text to our Search input

The functional design post mentioned in this video with the use case, storyboard and wireframes can be found here: Home Page Design.

3 Comments

Let me know what you think

  • robert
    Reply

    I noticed that this method of angular text filter would filter any field in the customer model. So if my country is “Cool-land” and I start typing in cool in the search box, the customer will still show up!

    • bossable

      Yeah sure does, especially when the customer is from Cool-land!
      Depending on what your requirements are it can be handy like that, or it can be a pain. For example, if you’re filtering by a number, the filter will also pick up record IDs in the results which can leave users scratching their heads.
      You can also limit your filtering to a specific field. More examples here: https://docs.angularjs.org/api/ng/filter/filter