Implementing A Bulk Update UI

This example demos a bulk update UI for a table of data.

Note that the "server side" implementation is mocked out using mockjax, so you can see the entire implementation. Click the "Source Code" tab to see the code.


  • The entire table is wrapped in a form tag, with checkboxes on each row indicating the row id.
  • A drop-down button sits outside the form (not strictly necessary) and includes the form with the ic-include attribute. The drop-down button targets the body of the table using the ic-target attribute and specifies an request indicator via the ic-indicator attribute.
  • The drop-down button has two options, "Active" and "Deactive" which issue posts via ic-post-to to /activate and /deactivate respectively. Both options inherit all the attibutes specified by the parent dropdown button.
  • When the server side handles a post it re-renders all the rows of the table, and applies a class, activate or deactivate to a row that is activated or deactivated. Using CSS transitions and the ic-transitioning, we can flash the color of these rows green or red, respectively.


Name Email Status
Joe Smithjoe@smith.orgActive
Angie MacDowellangie@macdowell.orgActive
Fuqua Tarkentonfuqua@tarkenton.orgActive
Kim Yeekim@yee.orgInactive