How to Filter Out Objects With Empty Child Arrays When Using Angular's ngRepeat

Recently I was working on a website using Angular.js and needed to make use of the ngRepeat directive to iterate through a collection of objects. The UI in question needed to allow the user to select a child object, contained in an array, from one of the objects being displayed. And to provide a better user experience, I decided to only show those objects where the aforementioned array contained at least one object to select. Here's how I accomplished this using Angular's filtering capabilities, where elements is the name of the property containing the child objects to choose from:

<div ng-repeat="section in allSections | filter:{elements: []}:false">

Hopefully this will help someone trying to do something similar. :)


Popular Posts

How To Mock Out Child Components In Unit Tests of Angular 2 Code

A Generic Method Using HttpClient to Make a Synchronous Get Request

The Cause and Solution for the "System.Runtime.Serialization.InvalidDataContractException: Type 'System.Threading.Tasks.Task`1[YourTypeHere]' cannot be serialized." Exception

A Red Herring When Using Moq to Mock Methods With Optional Parameters

Unit Testing with a Mock Entity Framework DbContext and Fake DbSets