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

Default Yes vs. Default No

Are you and your team members default yes, or default no? One is good for startups, the other not so much.

Check Your Echo Chamber

The people you surround yourself with create your reality. Choose carefully.

Don't Forget the Goal

There's only one thing that matters when you're building software.

How To Get a Job Offer

Want to get a job in the field you love easily? This is how.

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