Filtering on Array Members in Angular


If you use Angular, and have used ng-repeat any, you probably know that you can filter the set that’s being iterated through, using a filter in the ng-repeat expression. For example, let’s say you’ve got a list of employees, and you want to be able filter that list, only seeing employees that work in a certain department. Let’s look at how we’d do that in Angular:

See the Pen Angular Filtering by Justin Davis (@jwd2a) on CodePen.

Easy enough. We’re using the filter:{'department':dept} bit that comes after ng-repeat to filter the array that’s being iterated, in real time. The syntax we’re using here assures we’re matching just on the department property, and asking it to match dept, which corresponds to the ng-model used in our input.

But, what if our array of items was more complicated? What if each employee had multiple departments, and those departments were objects with all kinds of information. How can we filter on that?

Let’s take another example. We’ve got a list of employees, and each employee can belong to several departments. Each department has a name, a floor, and a description. What if we want to get all the employees that work in engineering now?

Luckily, this kind of deep filtering is a piece of cake in Angular. We can use a similar syntax to mongo, and simply specify the path we want to match on. Check the example:

See the Pen Angular Deep Array Filtering by Justin Davis (@jwd2a) on CodePen.

Here, we’re setting up our filter like this: filter:{'departments': {'name': dept}}, which lets us find only the objects in the department array with the name that matches. Because we’re specific on how we write this path, it won’t match on things we don’t want it to, like descriptions that have the same word.

Angular makes filtering like this super easy, and allow you to modify the dataset without writing custom filters or doing anything terribly complex.

Hope this helps you streamline your UI and put more power into your filtering!

Related Posts

The Art of Finding a Way

Being resourceful and relentless is one of the keys to being successful (and a great shipper). When in doubt, find a way.

Why I Have a Cocktail at 3:30 Every Day

Every day at 3:30, I stop what I'm doing and have a cocktail. It's become an incredibly important part of my daily routine.

Everyone In a Startup Should Have This Skill

You know you need technical skills to build the product, and sales skills to sell it, but does your team have this critical skill?

Doing Things Makes You Feel Better

If you're feeling down, depressed or just in a blah mood, do something. Anything. Make a thing, clean a room. Action makes you feel better.

Review: Auth0

Auth0 is a service that provides identity as a service, so you never have to build authentication again. Here, I lay out the good and the bad.

Why I Unfollowed Everyone on Twitter

I unfollowed everyone (~4,500 people) on Twitter. Here's why I'd do such an insane thing.

How to Turn Off Facebook Live Notifications

Facebook Live is cool, but the constant notifications about new videos aren't. Here's how to turn them off and get some peace.

If You Don't Have a Feedback System, It's Not Agile

Everyone loves to throw around the 'agile' word, when talking about how they approach development. But, who's actually doing it, and who's just pretending?

When Employee Retention is a Bad Thing

Having employees that stay around for awhile is a great thing, right? Maybe not always.

Review: Project 333

In a desparate attempt to declutter our space, we gave this radical program a try. Game changer, for sure.