AngularJS-native version of Select2 and Selectize. http://angular-ui.github.io/ui-select/
- Check CHANGELOG.md
- Search, Select, Multi-select and Tagging
- Multiple Themes: Bootstrap, Select2 and Selectize
- Keyboard support
- No jQuery required (except for old browsers)
- Small code base: 4.57KB min/gzipped vs 20KB for select2
For the roadmap, check issue #3 and the Wiki page.
$ npm install ui-select
$ bower install angular-ui-select
- Install Node.js and NPM (should come with)
- Install global dev dependencies:
npm install -g gulp - Install local dev dependencies:
npm installin repository directory
gulpto jshint, build and testgulp buildto jshint and buildgulp testfor one-time test with karma (also build and jshint)gulp watchto watch src files to jshint, build and test when changedgulp docsbuild docs and examples
Lightweight performance probes are included to track trends during optimization:
- Run:
npm run bench - Details: see PERF_BENCHMARKS.md for what is measured and how to adjust scale.
track-by(on<ui-select>or<ui-select-choices>): fallback key expression when the repeat lackstrack by .... Example:track-by="person.id".search-debounce: debounce local search refresh in ms (e.g.,search-debounce="150").visible-limit: cap rendered items for ungrouped lists (e.g.,visible-limit="200").visible-limit-when-searching: cap total rendered items only while searching (preserves full list on open). Works for grouped and ungrouped.- Pair with
visible-limit-when-searching-stepto enable a global "Show more" button via$select.showMore()in a footer.
- Pair with
group-visible-limit-when-searching: cap items per group only while searching (preserves full list on open). Shows a per‑group "Show more" link in built‑in themes.- Pair with
group-visible-limit-when-searching-stepto control per‑group increment.
- Pair with
Notes
- If
repeatalready includestrack by, it takes precedence over thetrack-byattribute. - When
track-byis present, disabled state checks leverage O(1) key lookups; behavior is preserved otherwise.
Global cap while searching (with Show more)
<ui-select ng-model="vm.sel" theme="bootstrap"
visible-limit-when-searching="200"
visible-limit-when-searching-step="200">
<ui-select-match placeholder="Pick...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="item in vm.items | filter:$select.search track by item.id">
<div ng-bind-html="item.name | highlight:$select.search"></div>
<ui-select-footer ng-if="$select.truncatedWhileSearching">
<button type="button" class="btn btn-link btn-sm"
ng-click="$select.showMore()">
Show more ({{$select.remainingCountWhenSearching}})
</button>
</ui-select-footer>
</ui-select-choices>
</ui-select>
Per‑group cap while searching (built‑in per‑group Show more)
<ui-select ng-model="vm.sel" theme="bootstrap"
group-visible-limit-when-searching="20"
group-visible-limit-when-searching-step="20">
<ui-select-match placeholder="Pick...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="item in vm.items | filter:$select.search track by item.id"
group-by="'category'">
<div ng-bind-html="item.name | highlight:$select.search"></div>
</ui-select-choices>
</ui-select>
Built‑in themes (Bootstrap, Select2, Selectize) render a per‑group "Show more (N)" link automatically when searching and the group is truncated. For custom themes, you can call $select.showMoreGroup($group.name) in your group template.
You can set sensible defaults in a config block:
angular.module('app').config(function(uiSelectConfig) {
// Theme
uiSelectConfig.theme = 'bootstrap';
// Search-time caps
uiSelectConfig.visibleLimitWhenSearching = undefined; // e.g., 200 for global cap
uiSelectConfig.visibleLimitWhenSearchingStep = 100; // global Show more step
uiSelectConfig.groupVisibleLimitWhenSearching = undefined; // e.g., 20 per group
uiSelectConfig.groupVisibleLimitWhenSearchingStep = 50; // per-group Show more step
// Existing options (unchanged)
uiSelectConfig.searchDebounce = 150; // example
});
- Check CONTRIBUTING.md
- Run the tests
- Try the examples
When issuing a pull request, please exclude changes from the "dist" folder to avoid merge conflicts.