patternfly/angular-patternfly

<div class="filter-pf filter-fields">
  <div class="input-group form-group">
    <div uib-dropdown class="input-group-btn">
      <button ng-if="$ctrl.config.fields.length > 1" uib-dropdown-toggle type="button" class="btn btn-default filter-fields"
              uib-tooltip="Filter by" tooltip-placement="top" tooltip-append-to-body="true">
        {{$ctrl.currentField.title}}
        <span class="caret"></span>
      </button>
      <ul uib-dropdown-menu>
        <li ng-repeat="item in $ctrl.config.fields"
            ng-class="{'selected': item === $ctrl.currentField}">
          <a class="filter-field" role="menuitem" tabindex="-1" ng-click="$ctrl.selectField(item)">
            {{item.title}}
          </a>
        </li>
      </ul>
    </div>
    <div ng-if="$ctrl.currentField.filterType !== 'select' && $ctrl.currentField.filterType !== 'complex-select'">
      <input class="form-control" type="{{$ctrl.currentField.filterType}}" ng-model="$ctrl.currentValue"
             placeholder="{{$ctrl.currentField.placeholder}}"
             ng-keypress="$ctrl.onValueKeyPress($event)"/>
    </div>
    <div ng-if="$ctrl.currentField.filterType === 'select'">
      <div class="btn-group bootstrap-select form-control filter-select" uib-dropdown >
        <button type="button" uib-dropdown-toggle class="btn btn-default dropdown-toggle">
          <span class="filter-option pull-left">{{$ctrl.currentValue.title || $ctrl.currentValue || $ctrl.currentField.placeholder}}</span>
          <span class="caret"></span>
        </button>
        <ul uib-dropdown-menu class="dropdown-menu-right" role="menu">
          <li ng-if="$ctrl.currentField.placeholder">
            <a role="menuitem" tabindex="-1" ng-click="$ctrl.selectValue()">
              {{$ctrl.currentField.placeholder}}
            </a>
          </li>
          <li ng-repeat="filterValue in $ctrl.currentField.filterValues"
              ng-class="{'selected': (filterValue === $ctrl.currentValue)}">
            <a role="menuitem" tabindex="-1" ng-click="$ctrl.selectValue(filterValue)">
              {{filterValue.title || filterValue}}
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div ng-if="$ctrl.currentField.filterType === 'complex-select'" class="category-select">

      <div class="btn-group bootstrap-select form-control filter-select" uib-dropdown >
        <button type="button" uib-dropdown-toggle class="btn btn-default dropdown-toggle">
          <span class="filter-option pull-left">{{$ctrl.filterCategory.title || $ctrl.filterCategory || $ctrl.currentField.placeholder}}</span>
          <span class="caret"></span>
        </button>
        <ul uib-dropdown-menu class="dropdown-menu-right" role="menu">
          <li ng-if="$ctrl.currentField.placeholder">
            <a role="menuitem" tabindex="-1" ng-click="$ctrl.selectValue()">
              {{$ctrl.currentField.placeholder}}
            </a>
          </li>
          <li ng-repeat="filterCategory in $ctrl.currentField.filterValues"
              ng-class="{'selected': (filterCategory == $ctrl.filterCategory)}">
            <a role="menuitem" tabindex="-1" ng-click="$ctrl.selectValue(filterCategory, 'filter-category')">
              {{filterCategory.title ||filterCategory}}
            </a>
          </li>
        </ul>
      </div>

      <div class="btn-group bootstrap-select form-control filter-select " uib-dropdown >
        <button type="button" uib-dropdown-toggle class="btn btn-default dropdown-toggle category-select-value">
          <span class="filter-option pull-left">{{$ctrl.filterValue.title || $ctrl.filterValue || $ctrl.currentField.filterCategoriesPlaceholder}}</span>
          <span class="caret"></span>
        </button>
        <ul uib-dropdown-menu class="dropdown-menu-right" role="menu">
          <li ng-if="$ctrl.currentField.placeholder">
            <a role="menuitem" tabindex="-1" ng-click="$ctrl.selectValue()">
              {{$ctrl.currentField.filterCategoriesPlaceholder}}
            </a>
          </li>
          <li ng-repeat="filterValue in $ctrl.currentField.filterCategories[$ctrl.filterCategory.id.toLowerCase() || $ctrl.filterCategory.toLowerCase() ].filterValues"
              ng-class="{'selected': filterValue === $ctrl.filterValue}">
            <a role="menuitem" tabindex="-1" ng-click="$ctrl.selectValue(filterValue, 'filter-value')">
              {{filterValue.title || filterValue}}
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>