Bossable.com - MEAN Stack: 18 - Customer Search using AngularJS Filters

Learn how to build a MEAN Stack (MongoDB, Express, AngularJS, NodeJS) app! Tutorial Step 18/30 - Customer Search using AngularJS Filters.

Want to build scalable web apps quickly and easily? Check out the MEAN stack, a collection of technologies that fit together to provide a solution that allows for a full-stack JavaScript implementation of web applications.

If you like it, please share it!

---

This Video Tutorial:

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

Thanks for viewing. I really appreciate any feedback you have.

---

------

[flight]

Cheers if you are doing this right now in 2016 using meanjs 0.4 version and have no problems so far.

And thanks Shristi for the wonderful tutorial. Gonna keep on going till the last!!

[DennyMathews]

I can't believe that Angular makes searching so much easier.  I'm very impressed.  What other surprises do you have in store?  :)

[blisteredoutlaw]

sheessshhh . i didn't know that Angular got that filter thing! . I am really Impressed and that makes me subscribe to your channel :D and I guess Ill start your 30 day challenge . :D thanks for sharing

[AjitGoel]

Thank you Shristi for your tutorial. You really do have a know of making things crystal clear.
On the "very small" device, there is no space between the "search" textbox and the "new customer" button. How would we accomplish this?

[lauragarciamontejo]

Hello, I am new to mean stack, and I have used the menajs generator to startup the project, it automatically adds a lot of default controllers and views, as well as users and Article entities and allows you to list all the items in the article collection, but how can I do if I need the list of users of the app listed in the home page, before the user actually logs in the app, I am asking because I already have some logic added in the index controller, allowing users to navigate it without an authenticating, but it is a different controller than the one for users, can I use more than one controller in a single view??

[Akshaylive]

This was interesting. When data is huge, this approach won't work. Need to query on server side.