Marc Hughes

I am a developer from a bit west of Boston.

Filtering lists in your angular dart templates.

16 Apr 2014

Update: See this blog post for some important notes and a different way of doing it.

Last week I started a new project utilizing angular.dart, and it's been a great learning experience so far. Today, I wanted to try and figure out how to make an interface that looks something like this:

alt text

I have a single list of cards with a property on the card that determines which column it goes in.

I could have split up the list into 3 lists in my controller, but then I'd have to worry about keeping those column specific lists in sync with the master list. This is a multi-user realtime app, so that would have gotten troublesome quickly.

After a lot of wrangling, I figured out you can use the "filter" filter on a list to trim it down to the entries you care about. By using this three times, I was able to write a bit of template code to make it all work.

The filtering magic is in the "state in | filter:{column:'backlog'}" piece.

You can also see that I'm using ng-include for the body of the cards, so I don't have to repeat that for each column. And lastly, the behavior of the card itself is managed by a controller that binds to the kanban-cell attribute and is looking for a card-id attribute to tell it which card to display.