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:
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 ctrl.game.states | 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.