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

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.

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.

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.

Sharing is the Currency of the Web

You consume free content all day on the web. The best way to pay back the people creating it? Share it.

The Magic of Low Fidelity

High-fidelity documentation is great, but it has a hidden dark side. Learn to embrace low-fidelity documentation, and you'll be amazed at the benefits.

Why You Should Blog More (Data)

When you stop blogging, people stop coming. Simple enough. Here's the proof.

Using a Linter Will Make You a Better Dev

Using a linter while you write code won't only make your code better formatted, it'll make you a better programmer.