patternfly/angular-patternfly

<div class="filter-pf">
  <div class="toolbar-pf-results">
    <h5>
      {{$ctrl.config.resultsCount}}
      <span ng-if="$ctrl.config.appliedFilters.length"> of {{$ctrl.config.totalCount}}</span>
      {{$ctrl.config.resultsLabel === undefined ? "Results" : $ctrl.config.resultsLabel}}
    </h5>
    <p class="filter-pf-active-label" ng-if="$ctrl.config.appliedFilters.length">Active filters:</p>
    <ul class="list-inline" ng-if="$ctrl.config.appliedFilters.length">
      <li ng-repeat="filter in $ctrl.config.appliedFilters" class="filter-pf-category-item">
      <span class="label pf-filter-category-label" ng-class="{'label-info': filter.values.length === 1, 'multiples': filter.values.length > 1}">
        {{filter.title}}:
        <ul class="list-inline filter-pf-category-values">
          <li ng-repeat="value in filter.values">
            <span class="label label-info">{{value}}
              <a href="#"><span ng-click="$ctrl.clearFilter($event, filter, value)" class="pficon pficon-close"></span></a>
            </span>
          </li>
        </ul>
      </span>
      </li>
    </ul>
    <p><a href="#" ng-click="$ctrl.clearAllFilters($event)" ng-if="$ctrl.config.appliedFilters.length > 0">Clear All Filters</a></p>
  </div>
</div>