Angular Selection Model

Select Something

Without the extra junk

Hello World

Yeah, there are a bunch of grid and table directives out there already. The selectionModel directive is unique in that it is indifferent to how your data is presented and only concerns itself with tracking which items are (and are not) selected.

Want to use a fancy table? Sure. Prefer to work with lists? That works. Just a bunch of divs? That's cool too! selectionModel is just a companion for ngRepeat if you can use ngRepeat to present your data, you can use selectionModel to manage your selection.

How about some demos?

The Basics

Getting up and running is a snap. Include the selectionModel script on your page and add it as a depedency to your angular app.

The selectionModel directive works with ngRepeat, it keys in on a boolean attribute on your collection items (configurable) and assigns a css class to selected items in the view (also configurable). Here's a basic example:

Demo

Choose something fancy!

  • {{$index+1}} {{item.label}}

Someone so fancy would choose the {{fancy.selectedItems[0].label | lowercase}}.

Controller...
  myApp.controller('FancyCtrl', function() {
    this.bag = [
      {label: 'Monacle', selected: false},
      {label: 'Top Hat', selected: true},
      {label: 'Mustachio', selected: false},
      {label: 'Coffee', selected: false}
    ];
  });
View...
  <ul ng-controller="FancyCtrl as fancy">
    <li ng-repeat="item in fancy.bag" selection-model>
      {{$index+1}} {{item.label}}
    </li>
  </ul>

That's literally zero lines of code to manage the selection. No click handlers. No view helpers.

Keeping selections in sync...

Is super easy! You can have the same collection power multiple grids or views and never worry about syncing selections.

One Collection, Multiple Grids

Choose something fancy!

  • {{$index+1}} {{item.label}}
Now make it double!
  • {{$index+1}} {{item.label}}

Two {{fancy.selectedItems[0].label}}s?!?! That's too many!

Same controller, different view.
<ul class="fancy">
  <li ng-repeat="item in fancy.bag"
      selection-model
      selection-model-selected-items="fancy.selectedItems">
    {{$index+1}} {{item.label}}
  </li>
</ul>

<ul class="fancy">
  <li ng-repeat="item in fancy.bag"
      selection-model
      selection-model-selected-items="fancy.selectedItems">
    {{$index+1}} {{item.label}}
  </li>
</ul>

Getting really fancy...

There are tons of ways to configure the selectionModel directive. You can:

The selectionModel directive is built to manage your selections and get out of the way. Use your own list and table styles and don't jump through hurdles to skin complex widgets.

The Kitchen Sink

Here's a more involved example.

Demo
# Label Value
{{$index + 1}} {{item.label}} {{item.value}}
Same controller, different view.
<input type="text" ng-model="fancyfilter" />

  <table>
    <thead>
      <tr>
        <th></th>
        <th>#</th>
        <th>Label</th>
        <th>Value</th>
      </tr>
    </thead>
    <tr ng-repeat="item in fancy.bag | filter:fancyfilter"
        selection-model
        selection-model-type="'checkbox'"
        selection-model-mode="'multiple-additive'"
        selection-model-selected-class="'foobar'">
      <td><input type="checkbox"></td>
      <td>{{$index + 1}}</td>
      <td>{{item.label}}</td>
      <td>{{item.value}}</td>
    </tr>
  </table>

And Then...

Still want more? Check out the GitHub repo.

© jtrussell 2014

Licensed under the MIT License.