bim-select/src/bim-select.template.html

A dropdown/select solution for Angular.js that handles millions of items without lag.

<div class="dropdown" ng-class="{ open: $ctrl.active }">
    <div class="input-group">
        <span ng-if="!$ctrl.shouldDisplayInput()" 
              class="bim-select-selected-item form-control"
              ng-class="{
                'is-clearable': $ctrl.isClearable() && !$ctrl.isDisabled()
                }"
              ng-disabled="$ctrl.isDisabled()">
            <ng-include src="$ctrl.internalSelectedItemTemplateUrl"></ng-include>
        </span>
        <input class="bim-select-input form-control"
               ng-class="{
                   'is-displayed': $ctrl.shouldDisplayInput()
               }"
               type="text"
               placeholder="{{ $ctrl.placeholderText() }}"
               ng-keydown="$ctrl.keydownHandler($event)"
               ng-click="$ctrl.activateHandler($event)"
               ng-blur="$ctrl.deactivateHandler($event)"
               ng-focus="$ctrl.activateHandler($event)"
               ng-change="$ctrl.inputValueChangeHandler()"
               ng-disabled="$ctrl.isDisabled()"
               ng-model="$ctrl.inputValue">
        <span class="input-group-btn">
            <button class="btn btn-default bim-select--clear"
                    type="button"
                    ng-click="$ctrl.clear()"
                    ng-disabled="$ctrl.isDisabled()"
                    ng-if="$ctrl.isClearable() && !$ctrl.isDisabled()">
                <span class="fa fa-remove"></span>
            </button>
            <button class="btn btn-default bim-select--toggle"
                    type="button"
                    ng-disabled="$ctrl.isDisabled()"
                    ng-click="$ctrl.toggleHandler()">
                <span class="fa fa-caret-down"></span>
            </button>
        </span>
    </div>
    <ul class="bim-select-dropdown dropdown-menu"
        vs-repeat
        role="listbox"
        ng-style="{ width: $ctrl.width }">
        <li role="option"
            ng-repeat="item in $ctrl.matches track by item.id"
            ng-click="$ctrl.select($event, item)"
            ng-class="{ 'active': item.index === $ctrl.activeIndex, 'is-disabled': $ctrl.isDisabledItem(item) }">
            <ng-include src="$ctrl.internalItemTemplateUrl"></ng-include>
        </li>
    </ul>
</div>