angular-ui / ui-select Goto Github PK
View Code? Open in Web Editor NEWAngularJS-native version of Select2 and Selectize
License: MIT License
AngularJS-native version of Select2 and Selectize
License: MIT License
When the directive loads, it should select from the list the current value of ngModel
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
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?
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.
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'
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 :)
It seems that ng-disabled is not working with the current version of ui-select!
Wrong main file in bower.json point to select.js instead of dist/select.js
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:
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!
Since we're using ui.keypress
@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.
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?
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()">
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.
[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)
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.
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
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.
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.
A Foundation theme would be nice to include.
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).....
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?
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
ui-select already taken by https://github.com/brettshollenberger/ui-select
Essentially it would be something like a button that turns into an input and uses the dropmenu.
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
Something like:
scope.$on('$destroy', function() {
$document.off('click');
});
See Do event handlers need to be removed on directives when $destory fires?
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.
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
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.
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?
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.
I'm looking over the source and I have some notes I believe that need to be addressed.
ui-select
widgets on the page to remain openattrs.placeholder
should probably be observed.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 insteaddefault
already. There isn't a need to make every single option defaultOption1
and defaultOption2
$scope.uiSelectCtrl
can be changed to $scope.$select
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.
Is there anyway to make ng-click or ng-focus work with ui-select?
I can't quite pinpoint it, but the unbinding of mousedown
is too aggressive when listening to scope
s being destroyed. I have noticed it throughout navigating my application and was having a hard time replicating it.
It's most noticable inside ng-repeat
s 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
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
).
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 -->
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.
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?
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).
Moving to ui-select with TAB and using navigation keys to select item works with bootstrap theme but doesn't with select2 theme.
If this is already working, would like to see this edge-case in demo.html
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).
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:
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.