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.
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!
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
I can’t believe that Angular makes searching so much easier. I’m very impressed. What other surprises do you have in store? 🙂