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

How to Onboard a Product Designer

If you're bringing a product designer or UX designer in to help you design your product, there's a bad way to do it, and a good way to do it. Here's how to make sure you're doing it right.

Review: Slicing Pie

Slicing Pie is a new way to think about company equity splits, and it blows away the old methods you've probably used.

When Troubleshooting, Follow the Process!

When you're trying to troubleshoot something - a car that won't start, or a business that isn't working - follow the right process.

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.