/ui-select

AngularJS-native version of Select2 and Selectize

Primary LanguageJavaScriptMIT LicenseMIT

AngularJS ui-select Build Status

AngularJS-native version of Select2 and Selectize.

Check examples.

Features

  • Search and select
  • Available themes: Bootstrap, Select2 and Selectize
  • Keyboard support
  • jQuery not required (except for old browsers)
  • Small code base: 400 lines of JavaScript vs 20 KB for select2.min.js

For the roadmap, check issue #3 and the Wiki page.

Browser compatibility

Starting from Internet Explorer 8 and Firefox 3.6 included.

Installation using Bower

  • bower install angular-ui-select
  • Inside your HTML add
    • select.js: <script src="bower_components/angular-ui-select/dist/select.min.js"></script>
    • select.css: <link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.min.css">
  • Add the ui.select module as a dependency: angular.module("myApp", ["ui.select"]);

Bootstrap theme

If you already use Bootstrap, this theme will save you a lot of CSS code compared to the Select2 and Selectize themes.

Bower:

  • bower install bootstrap
  • <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  • Or the LESS version: @import "bower_components/bootstrap/less/bootstrap.less";

Bootstrap CDN:

  • <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">

Configuration:

app.config(function(uiSelectConfig) {
  uiSelectConfig.theme = 'bootstrap';
});

Select2 theme

Bower:

  • bower install select2#~3.4.5
  • <link rel="stylesheet" href="bower_components/select2/select2.css">

cdnjs:

  • <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">

Configuration:

app.config(function(uiSelectConfig) {
  uiSelectConfig.theme = 'select2';
});

Selectize theme

Bower:

  • bower install selectize#~0.8.5
  • <link rel="stylesheet" href="bower_components/selectize/dist/css/selectize.default.css">
  • Or the LESS version: @import "bower_components/selectize/dist/less/selectize.default.less";

cdnjs:

  • <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">

Configuration:

app.config(function(uiSelectConfig) {
  uiSelectConfig.theme = 'selectize';
});

FAQ

ng-model not working with a simple variable on $scope

You cannot write:

<ui-select ng-model="item"> <!-- Wrong -->
  [...]
</ui-select>

You need to write:

<ui-select ng-model="item.selected"> <!-- Correct -->
  [...]
</ui-select>

Or:

<ui-select ng-model="$parent.item"> <!-- Hack -->
  [...]
</ui-select>

For more explanations, check ui-select #18 and angular.js #6199.

ng-bind-html gives me "Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context"

You need to use module ngSanitize (recommended) or $sce:

$scope.trustAsHtml = function(value) {
  return $sce.trustAsHtml(value);
};
<div ng-bind-html="trustAsHtml((item | highlight: $select.search))"></div>

I get "TypeError: Object [...] has no method 'indexOf' at htmlParser"

You are using ng-bind-html with a number:

<div ng-bind-html="person.age | highlight: $select.search"></div>

You should write instead:

<div ng-bind-html="''+person.age | highlight: $select.search"></div>

Or:

<div ng-bind-html="person.age.toString() | highlight: $select.search"></div>

Development

Prepare your environment

  • Install Node.js and NPM (should come with)
  • Install global dev dependencies: npm install -g bower gulp
  • Install local dev dependencies: npm install && bower install in repository directory

Development Commands

  • gulp to jshint, build and test
  • gulp build to jshint and build
  • gulp test for one-time test with karma (also build and jshint)
  • gulp watch to watch src files to jshin, build and test when changed

Contributing

When issuing a pull request, please exclude changes from the "dist" folder to avoid merge conflicts.