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

Required Reading for All Couples

If you're married, about to get married, or just committed to someone for a long period of time, these three books are absolutely required reading.

I Launched a New Podcast, and I Want You to Call In

I just launched a new podcast called Design By Committee, dedicated to answering your questions about UX, product design, content, strategy and anything else tech.

Shitty Sales Have Made Product Development Harder

Shitty, one-sided sales processes have made product development much more difficult for early stage startups.

Why I'm Cold Emailing You

You might have gotten a cold email from me. Tasteless? Some people think so. Here's why I'm doing it.

How I Found Your Email

I've been cold emailing a lot of people, and many folks are surprised that I found their email. Here's where I dug it up.

Sales is User Research, Undercover

Announcement: The Most Exciting Thing I've Done

Today, I'm announcing the most exciting project I've been involved with. It's called CrowdSync, and it helps to automate paperwork, communication and logistics when dealing with groups of people. Read on for why this is so big.

Three Ways to Start Talking to Users

How to Post to Private Slack Channels from Zapier

If you automate posting to Slack via Zapier, you might need to post to a private channel. It's not entirely obvious how to do it, but actually pretty damn easy.

A Peek Inside our UX Process