angular-ui / ui-select

AngularJS-native version of Select2 and Selectize

AngularJS ui-select

AngularJS-native version of Select2 and Selectize. http://angular-ui.github.io/ui-select/

Getting Started

• Examples
• Examples Source
• Documentation

Latest Changes

• Check CHANGELOG.md

Features

• 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.

Installation Methods

npm

$ npm install ui-select

bower

$ bower install angular-ui-select

Development

Prepare your environment

• Install Node.js and NPM (should come with)
• Install global dev dependencies: npm install -g gulp
• Install local dev dependencies: npm 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 jshint, build and test when changed
• gulp docs build docs and examples

Contributing

• 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.

ui-select's Issues

Setting scope:anything causes issues

I want to create scope variables that are available in the transcluded region. It seems you can't use both scope:true AND ng-transclude, sadly. I'd like to learn more about why and if perhaps the core might be worth patching?

Error thrown with latest dist using example code

[UPDATE: MY OWN FAULT, SEE BELOW]
I've run into the name collision issue here and have tried to fix it myself but then discovered there is a new dist from my last one so I just confirmed it has the new prefix ui-select on match and choices so I thought I was home free but...nope.

It appears to work as it's supposed to at a rough first trial with it, however:

This error is thrown with the latest select.js and select.css downloaded from /dist about 10 minutes ago:

Error: [ui.select:transcluded] http://errors.angularjs.org/1.2.14/ui.select/transcluded?p0=Expected%201%20.ui-select-match%20but%20got%20'%7B0%7D'.&p1=0

I just copied the exact example from /examples/bootstrap.html pasted here for convenience:

 <div class="form-group">
    <label class="col-sm-3 control-label">Default</label>
    <div class="col-sm-6">

      <ui-select ng-model="person.selected" theme="bootstrap">
        <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
        <ui-select-choices repeat="item in people | filter: $select.search">
          <div ng-bind-html="item.name | highlight: $select.search"></div>
          <small ng-bind-html="item.email | highlight: $select.search"></small>
        </ui-select-choices>
      </ui-select>

    </div>
  </div>

And this is the area of code throwing the error:

 var transcludedMatch = transcluded.querySelectorAll('.ui-select-match');
    if (transcludedMatch.length !== 1) {
      throw uiSelectMinErr('transcluded', "Expected 1 .ui-select-match but got '{0}'.", transcludedMatch.length);
    }
    element.querySelectorAll('.ui-select-match').replaceWith(transcludedMatch);

Clearly there is a ui-select-match so...? (I'm using jquery-2.0.3 if that has any bearing on this)

Keeps throwing error Expected 1 .ui-select-match but got '0'

This is being used in a modal popup. I've seen it before, but can't remember how I fixed it. Not sure if it has something to do with the modal or using controlerAs syntax.

http://plnkr.co/edit/UyuPozU95DzvjbOcl8YJ?p=info

 function StudentPollSettingsCtrl($scope, $modalInstance, content, EDITOR_OPTIONS, StudentPollService) {
        this.chartObject = {};

        this.chartType = {};
        this.chartTypes = [
            {
                value: "pie",
                name: "Pie"
            },
            {
                value: "column",
                name: "Column"
            }
        ];

<tab heading="Chart" select="settingsCtrl.updateChart()">
            <div class="row">
                <div class="col-xs-12">
                    <div style="display: inline-block; width: 300px; margin-left: 10px">
                        <ui-select ng-model="settingsCtrl.chartType"
                                   theme="selectize" ng-change="settingsCtrl.updateChart()">
                            <match placeholder="Choose Chart Type">{{$select.selected.name}}</match>
                            <choices repeat="option in settingsCtrl.chartTypes">
                                <div ng-bind-html="option.name"></div>
                            </choices>
                        </ui-select>
                    </div>
                </div>
            </div>

Error: [ui.select:transcluded] Expected 1 .ui-select-match but got '0'.
    at http://0.0.0.0:9000/bower_components/angular-ui-select/dist/select.js:32:12
    at http://0.0.0.0:9000/bower_components/angular-ui-select/dist/select.js:360:17
    at publicLinkFn (http://0.0.0.0:9000/bower_components/angular/angular.js:5890:29)
    at boundTranscludeFn (http://0.0.0.0:9000/bower_components/angular/angular.js:6005:21)
    at controllersBoundTransclude (http://0.0.0.0:9000/bower_components/angular/angular.js:6600:18)
    at link (http://0.0.0.0:9000/bower_components/angular-ui-select/dist/select.js:350:7)
    at nodeLinkFn (http://0.0.0.0:9000/bower_components/angular/angular.js:6579:13)
    at delayedNodeLinkFn (http://0.0.0.0:9000/bower_components/angular/angular.js:6798:11)
    at compositeLinkFn (http://0.0.0.0:9000/bower_components/angular/angular.js:5982:15)
    at compositeLinkFn (http://0.0.0.0:9000/bower_components/angular/angular.js:5989:13) <div class="selectize-control single ng-pristine ng-valid" ng-model="settingsCtrl.chartType.selected" theme="selectize" ng-change="settingsCtrl.updateChart()"> 

Lack of version number is confusing

This component doesn't appear to have a version number anywhere in the code that I can find, please consider adding one so we can all be sure which version we're talking about here.

How to do cascading select?

I found that $select.refresh will only be called when $select.search is changed:

scope.$watch('$select.search', function() {
  $select.activeIndex = 0;
  $select.refresh(attrs.refresh);
});

So, how can I get the sub selection refreshed when parent selection chagnged?
Thanks.

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

Inside demo.html, if you replace ng-model="data.custom":

<ui-select ng-model="data.custom">
  ...
</ui-select>

by ng-model="myItem":

<ui-select ng-model="myItem">
  ...
</ui-select>

$scope.myItem never gets set.
It's like ngModelCtrl.$setViewValue(newVal) cannot bind to a simple variable $scope.myItem.

It will work only if ng-model is an object:

• demo.js: $scope.myItem = {}
• demo.html: ng-model="myItem.data"

I could not figure out why, any idea?

Roadmap and design

I threw this together to pretty much scrape some features I am hoping this repo eventually is capable of doing: https://github.com/angular-ui/ui-select/wiki/Roadmap

One of the the things I'm focused on right now is easy-to-customize data, access to internal data, and templates.

One concern is the ability to specify a custom list-item template (currently possible) and a custom selected template (not possible, just uses a button). Perhaps we should break this up into multiple tags?

<ui-select>
  <selected></selected>
  <options>
    <li ng-repeat="..."></li>
  </options>
</ui-select>

These child-directives COULD in fact be optional, and if not specified, simply generate <li><a>{{value}}</a></li>

Secondly, if you don't specify <selected> or <options> but you DO specify a template we could use THAT one for both. Perhaps instead of making you create the <li> tag and it's related attributes we can do it for you and you simply specify the contents of each list-item and the selected-item?

$sce.trustAsHtml rejects numeric values

When the data have int values to be printed into choices span, it gets error:

Error: [$sce:itype] Attempted to trust a non-string value in a content requiring a string: Context: html

// ERROR on value = 1;
// OK on value = "1"
scope.trustAsHtml = function(value) {
      return $sce.trustAsHtml(value);
};

I've used string conversion to overcome:

return $sce.trustAsHtml("" + value);

Btw, in the test I have 3 select fields with 1 element in each.
I'm using only one trustAsHtml() (just span, without small)
I get 21 errors on page load. Why it is so much?

How to disable the ui-select?

It seems that ng-disabled is not working with the current version of ui-select!

"main" in bower.json

Wrong main file in bower.json point to select.js instead of dist/select.js

Relocate `template: '...'` properties to `templateUrl: '...'` and extract the HTML

Relocate template: '...' properties to external files and use templateUrl: 'select.html' (approximately) instead.

We can then create a select2 version of select.html and a bootstrap version, etc.

Example path:

src/themes/select2/select2.css
src/themes/select2/select2.png
src/themes/select2/select.html // or whatever

Since you're aiming for just getting things working, just hard-code the path to the select2 version and we can improve this later.

setting chosen property of selected object as ngModel instead of the whole object

I'd like to ask if the module already is capable of the following and I just haven't found how or is it not yet possible:

Referring to the demo: I'd like for the module to be able to set only the email of the selected person as ngModel value, not the whole object (email, name, age) as it does now.

As I inspected the code it seems to be impossible looking at the line 62:

    var match = expression.match(/^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?\s*$/);

and the way ctrl.select is used for both keyboard and pointer

What I'd like to propose is something closer to the ngOptions select as label for value in array syntax in the native angular select but label is not used in this case anyway since it's displayed using the template that is transcluded - so let's name it property as value in array. Example:

<ui-select ng-model="person.selected" theme="select2">
  <ui-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</match>
  <ui-choices repeat="email as person in people | propsFilter: {name: $select.search, age: $select.search}">
    <div ng-bind-html="person.name | highlight: $select.search"></div>
    <small>
      email: {{person.email}}
      age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
    </small>
  </ui-choices>
</ui-select>
<p> Selected: {{ person.selected }} </p> <!-- I expect "Selected: [email protected]" instead of what it displays now: the whole object -->

interferes with ui.bootstrap.typeahead

the match directive is restriced to EA, which causes interference with the ui.bootstrap.typeahead directive which uses match="" as an attribute.
Just restricting the match directive of ui-select to E should solve this, but in the long run maybe deciding on another name for the match directive would be reasonable (maybe selectMatch).

'mousedown' getting unbound when it shouldn't

I can't quite pinpoint it, but the unbinding of mousedown is too aggressive when listening to scopes being destroyed. I have noticed it throughout navigating my application and was having a hard time replicating it.

It's most noticable inside ng-repeats though. When you remove an item and it's scope is destroyed, all mousedown events are unbound, which breaks the "click off" functionality for remaining ui-selects on the page -- regardless of whether they were inside the ng-repeat or not.

Plunkr: http://plnkr.co/edit/G9lll3Y7DPRsnUec6KbF?p=preview
Relevant Lines: https://github.com/angular-ui/ui-select/blob/master/src/select.js#L345-L347

Bower name ui-select already taken

ui-select already taken by https://github.com/brettshollenberger/ui-select

See http://bower.io/search/#!/search/ui-select

Support for select2-type tags/multi-select

Are there plans for supporting tags or multi-select like current select2? Is there a concept/design behind how to implement this? If we move to this directive rather than the select2 port, we will need this functionality. I would like to discuss ideas around it as maybe we could end up helping to get that functionality built.

Hardcoded paths to templates

select.js contains hardcoded paths to templates, example: https://github.com/angular-ui/ui-select/blob/master/src/select.js#L13

I had to change this to 'bower_components/ui-select/src/' in my case.

Similarities to bootstrap

Hah, after developing this quite a bit, it's hard to ignore the obvious similarities to ui-typeahead, so I have to concede that to @pkozlowski-opensource

The one major difference I'm seeing is that we're leveraging this theme property and have a way for people to customize the template on-the-fly when they call the directive.

I still would also like to see a tagging behavior however and at this time neither solution supports one.

Anyway, I would be curious to see if an on-the-fly template approach could be added to ui-typeahead (optionally of course). Although simple differences such as the input being a button when inactive vs a textbox, etc.

I am curious to see what middle-ground can be approached. If I had the ability to customize templates in ui-typeahead as easily as I can here, I might reconsider folding this repo and just creating a selection of themes for the bootstrap version(?).

Whatever, just random thoughts.

Render initial ng-model value

When the directive loads, it should select from the list the current value of ngModel

map model to property of selected item

Hello

First thanks for the great component.

Currently the selected item maps to model directly but I need to use only it's single property.

for example:
$scope.items = [{key: 'green', value: 'Grass'}, {key: 'yellow', value: 'Sun'}];

I would like to have listed all the values and on selection to only use (model) key. Is it possible?

service naming clash with angular-ui/ui-utils highlight

ui-select reimplements the functionality of already existing module ui.highlight in the angular-ui/ui-utils package.

For the sake of consistence across the angular-ui it should be used as a dependency IMHO.
For what it's worth it also overwrites the existing instance of highlight service since it's not namespaced and angular won't deal with it automatically.

Minification most probably does not work

Angular 1.1.5

Is there a way to make this plugin work with Angular 1.1.5? So far I'm having issues with $sce not being available and the fifth parameter of the link function being undefined.

I was really hoping to use this plugin but am unfortunately unable to upgrade to Angular 1.2.x

Looses field focus after selecting an entry

ui-select with the bootstrap theme does not handle focus() properly. After the user selects an entry from the dropdown by pressing Enter, keyboard focus is lost (I think that focus is moved to the element). The problem can be seen in the following plunkr:

http://plnkr.co/edit/FZ6xHJHLhmyIxLKS4mAK?p=preview

Option groups

I like this lib, it's good replacement to select2 in angular projects. Now there is lacks only list grouping which exists in native select and select2. I see your plans on it in your roadmap and I suggest to discuss future feature api here.
I propose the new keyword in repeat option — group by, like it used in angular select directive in ng-options attribute:

<ui-select ng-model="person.selected" theme="select2" class="form-control">
    <match placeholder="Select or search a person in the list...">{{$select.selected.name}}</match>
    <choices repeat="group by item.department for item in people">
        <span ng-bind-html="item.name | highlight: $select.search"></span>
        <small ng-bind-html="item.email | highlight: $select.search"></small>
    </choices>
</ui-select>

I can try implement this feature, if you approve this grouping definition

Should clean up the handlers when destroyed

Something like:

scope.$on('$destroy', function() {
  $document.off('click');
});

See Do event handlers need to be removed on directives when $destory fires?

Is it possible to add support for custom query function like the select2?

Reuse ui.bootstrap.typeahead functionality

typeahead.js already is an AngularJS native directive, so maybe we could reuse all that functionality and extend it.

typeahead module (ui.bootstrap.typeahead) depends on:

• 2 modules more ['ui.bootstrap.position', 'ui.bootstrap.bindHtml']
• 2 templates (typeahead-match.html and typeahead-popup.html)
• css from Bootstrap

Create bootstrap theme

Essentially it would be something like a button that turns into an input and uses the dropmenu.

Pressing enter in a form on a textbox opens select

Hi,

when pressing "enter" in a textbox in a form instead of submitting the form, the select control opens. the reason is, that the "button" in the "bootstrap/match.tpl.html" has no type and so its default type is submit.

The browser is Chrome 33

Fix: Add type="button" to the button in the template above

Error when used with Typeahead

I'm using both ui-select and Angular UI Bootstrap Typeahead in the same view, and running into this error when typing into a typeahead input field:

Error: [$compile:ctreq] Controller 'uiSelect', required by directive 'typeaheadMatch', can't be found!
http://errors.angularjs.org/1.2.14/$compile/ctreq?p0=uiSelect&p1=typeaheadMatch
...
 at controllersBoundTransclude (http://localhost:9000/assets/lib/angular/angular.js:6332:18) <div ng-hide="$select.open || $select.selected===undefined || $select.selected==''" class="ui-select-match ng-isolate-scope" ng-transclude="" index="$index" match="match" query="query" template-url="templateUrl"> 

I'm using Angular v1.2.14. Any ideas on how to resolve this? Thanks!

Bootstrap theme: missing scrollbar on IE8

On IE8, when the select dropdown is taller than the max-width, there is no scrollbar. This is due to a missing overflow-y style. In IE8, without the style, it acts as if overflow-y: hidden. Adding the following CSS fixes this problem.

.ui-select-bootstrap > .ui-select-choices {
    overflow-y: auto;
}

I also tested that latest Chrome and Firefox are not affected (they still show the scrollbar only when content is too tall).

minimumResultsForSearch support

I guess this is not supported, right? This is great option for selects that have just few options. Showing search input field in such cases is kinda dumb (from UX perspective). It would be marvelous to be able to set this.

Foundation theme

A Foundation theme would be nice to include.

minimumResultsForSearch support

I guess this is not supported, right? This is great option for selects that have just few options. Showing search input field in such cases is kinda dumb (from UX perspective). It would be marvelous to be able to set this.

Clicking on a select should close the others

Focus doesn't work with Select2 theme

Moving to ui-select with TAB and using navigation keys to select item works with bootstrap theme but doesn't with select2 theme.

pre select input value

How can i pre select value in the input field?

HTML code:

<ui-select name="source" ng-model="lead.modelSource.selected" theme="select2" class="form-control">
          <match placeholder="Select Source">{{$select.selected.name}}</match>
          <choices repeat="item in source | filter: $select.search">
            <span ng-bind-html="item.name | highlight: $select.search" ng-selected="selectSource(item.sourceId)"></span>
          </choices>
        </ui-select>

My JS code:

$scope.selectSource = function(sourceIdPassed)
    {
        if(sourceIdPassed == $scope.sourceId){
            return 'selected';
        }
    }

StackOverFlow Link:
http://stackoverflow.com/questions/22962755

Conflict with 'enter' keybinding and ng-click

Seams there is a conflict with enter: '$select((data.items|filter: $select.search)[$select.index].title)' and ng-click="activate()"

If you press enter, both get fired, first enter keybinding and then ng-click so the input (type 'text') is changed to type 'button' but because ng-click is fired alse, the type is changed back to 'text'

Add automated build system

@douglasduteil do you think you could help us out with this? @tkrotoff was getting a bit annoyed at having to commit / manage builds.

@tkrotoff: @douglasduteil has been awesome enough to build this https://github.com/angular-ui/angular-ui-publisher for the exact problem you were complaining about regarding dist files.

Multiple select

If this is already working, would like to see this edge-case in demo.html

Crash under IE8 and Firefox 3.6

Error: tElement[0].parentElement is undefined

Each time inside select.js, element[0] is used it means jqLite is not used and the code should be refactored.

We will gain support for IE8 and Firefox 3.6 + the code will be shorter and easier to understand :)

Append the list to body

I have a select in a div with overflow hidden/auto
In every (most?) usecase it's desirable to let the select go outside of the overflow element, like the native select and select2 dose)

Its true for all kind of typeahead, custom <datalist> polyfill things

Add dependency to ui.utils

Since we're using ui.keypress

Selectize choices.tpl.html contain inline CSS

Unfortunately cannot do without for now, see selectize/selectize.js#289

The value top: 36px; breaks when selectize.bootstrap3.css is used instead of the default CSS (should be top: 31px; with Bootstrap 3).

Update README and project description

I don't think this project is a native "select2" library anymore. We should put better description to reflect the framework agnostic approach we want to achieve.

"ng-click" not firing up

Is there anyway to make ng-click or ng-focus work with ui-select?

Simpler ngModel bind...

I want to get/set the values of the select by id (and not by visible text in the options) and i don't want to bind a complex {id:"...", text:"..."} object to ngModel, just and id variable that is mapped to the select underneath. All other selects have this kind of functionality (including select2 and selectize).....

Collect scope methods such as $scope.up() and $scope.down() into 1 object

To prevent cluttering the $scope and accidentally conflicting with user-specified $scope data, I recommend we namespace all the scope methods and values.

For instance, instead of doing $scope.up() we should probably use a $select namespace and do $scope.$select.up(), and so forth along this pattern. This $select object can also then be used to hold the state of the widget.

Code Review / Cleanup

I'm looking over the source and I have some notes I believe that need to be addressed.

• Binding to $document could cause multiple ui-select widgets on the page to remain open
• This should be element.triggerHandler('click')
• attrs.placeholder should probably be observed
• uiSelectConfig
  • .constant() can't be overridden. We should perhaps look into things like instructing people to only change properties of the object (instead of setting a new reference) or using a function instead
  • Since this is a global config, it's kind of safe to assume these options are default already. There isn't a need to make every single option defaultOption1 and defaultOption2
• $scope.uiSelectCtrl can be changed to $scope.$select