Grouped Checkbox Filters

Displays a collections of grouped checkbox filters for selection

HTML

<div class="t-content" style="width:300px; height: 500px;" ng-controller="groupedFiltersExampleController as ctrl">
    <inv-grouped-filters
            filters-title="ctrl.groupFiltersTitle"
            filters-groups="ctrl.filtersCollection"
            filters-descriptor="ctrl.filtersDescriptor"
            on-filter-selected="ctrl.filterSelected">
    </inv-grouped-filters>
</div>

Descriptor Optional

If the data is formatted with the expected properties, a descriptor does not have to be specified.

HTML

<div class="t-content" style="width:300px; height: 500px;" ng-controller="groupedFiltersExampleController as ctrl">
    <inv-grouped-filters
            filters-title="ctrl.groupFiltersTitle"
            filters-groups="ctrl.similarFiltersCollection"
            on-filter-selected="ctrl.filterSelected">
    </inv-grouped-filters>
</div>

Grouped Checkbox Filters, second example different descriptors

Displays a collections of grouped checkbox filters for selection

HTML

<div class="t-content" style="width:300px; height: 500px;" ng-controller="groupedFiltersExampleController as ctrl">
    <inv-grouped-filters
            filters-title="ctrl.wbGroupFiltersTitle"
            filters-groups="ctrl.workbenchFilterGroups"
            filters-descriptor="ctrl.wbFiltersDescriptor"
            on-filter-selected="ctrl.wbFilterSelected">
    </inv-grouped-filters>
</div>

Empty Filter Groupings

An empty filters indicator will show when there are no filters in the collection.

HTML

<div class="t-content" style="width:300px; height: 500px;" ng-controller="groupedFiltersExampleController as ctrl">
    <inv-grouped-filters
            filters-title="ctrl.groupFiltersTitle"
            filters-groups="ctrl.emptyCollection"
            on-filter-selected="ctrl.filterSelected">
    </inv-grouped-filters>
</div>