valor-software / ng2-select Goto Github PK
View Code? Open in Web Editor NEWAngular based replacement for select boxes
Home Page: http://valor-software.github.io/ng2-select/
License: MIT License
Angular based replacement for select boxes
Home Page: http://valor-software.github.io/ng2-select/
License: MIT License
The docs and demo examples are using the data
attribute for initial data. Whereas actually it is initData
in implemented code. If anyone going to use data
, he will not get desired results. Kindly update the docs and demo examples, as it took me so many frustrating hours to figure this out.
In the readme file where the items property is described there is a reference to a query property for those of us who would like to load the select box with non-local data. Is this feature not fully implemented - or is it not fully documented?
I tried to use it but I couldn't make it work after the recent modules restructuring
Select2 has the option to load data through ajax calls when a phrase is searched.
I think this is important as sometimes the list could be huge and you don't want to load all the data on init.
I'm having difficulty troubleshooting an issue I'm having with ng2-select and my ionic2/angular2 app. I'm encountering this issue when attempting to inject ng2-select into my app like so:
import { Select } from 'ng2-select';
@App({
template: require('./app.html'),
providers: [Select],
})
It causes the entire app to crash because of a stack overflow. It seems that zone.js is at the root of the stack trace. Can anyone give me any insight into this? Is this a bug in ng2-select or is it more likely I am doing something wrong?
EXCEPTION: Template parse errors:
RangeError: Maximum call stack size exceeded ("<!-- left menu -->
<ion-menu side="left" type="reveal" [ERROR ->][content]="content">
<ion-content class="hamburger-menu">
<ion-list>
"): DeveloperApp@1:36
RangeError: Maximum call stack size exceeded ("<!-- left menu -->
[ERROR ->]<ion-menu side="left" type="reveal" [content]="content">
<ion-content class="hamburger-menu">
<"): DeveloperApp@1:0
RangeError: Maximum call stack size exceeded ("<!-- left menu -->
[ERROR ->]<ion-menu side="left" type="reveal" [content]="content">
<ion-content class="hamburger-menu">
<"): DeveloperApp@1:0
RangeError: Maximum call stack size exceeded ("<!-- left menu -->
[ERROR ->]<ion-menu side="left" type="reveal" [content]="content">
<ion-content class="hamburger-menu">
<"): DeveloperApp@1:0
RangeError: Maximum call stack size exceeded ("
<button
ion-item
[ERROR ->]*ngFor="#page of pages"
(click)="go(page.page, page.params)">
{{page.name}}
"): DeveloperApp@6:8
RangeError: Maximum call stack size exceeded ("
ion-item
*ngFor="#page of pages"
[ERROR ->](click)="go(page.page, page.params)">
{{page.name}}
</button>
"): DeveloperApp@7:8
RangeError: Maximum call stack size exceeded ("
ion-item
*ngFor="#page of pages"
(click)="go(page.page, page.params)">[ERROR ->]
{{page.name}}
</button>
</ion-list>
"): DeveloperApp@7:45
RangeError: Maximum call stack size exceeded ("
<!-- main navigation -->
<ion-nav id="nav" [ERROR ->][root]="root" #content></ion-nav>
"): DeveloperApp@15:18BrowserDomAdapter.logError @ browser_adapter.js:76BrowserDomAdapter.logGroup @ browser_adapter.js:86ExceptionHandler.call @ exception_handler.js:56(anonymous function) @ application_ref.js:192NgZone._notifyOnError @ ng_zone.js:430errorHandling.onError @ ng_zone.js:328Zone.run @ zone-microtask.js:1221(anonymous function) @ ng_zone.js:343zoneBoundFn @ zone-microtask.js:1194lib$es6$promise$$internal$$tryCatch @ zone-microtask.js:442lib$es6$promise$$internal$$invokeCallback @ zone-microtask.js:454lib$es6$promise$$internal$$publish @ zone-microtask.js:425(anonymous function) @ zone-microtask.js:97microtask @ ng_zone.js:383Zone.run @ zone-microtask.js:1217(anonymous function) @ ng_zone.js:343zoneBoundFn @ zone-microtask.js:1194lib$es6$promise$asap$$flush @ zone-microtask.js:236
browser_adapter.js:76 STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:58(anonymous function) @ application_ref.js:192NgZone._notifyOnError @ ng_zone.js:430errorHandling.onError @ ng_zone.js:328Zone.run @ zone-microtask.js:1221(anonymous function) @ ng_zone.js:343zoneBoundFn @ zone-microtask.js:1194lib$es6$promise$$internal$$tryCatch @ zone-microtask.js:442lib$es6$promise$$internal$$invokeCallback @ zone-microtask.js:454lib$es6$promise$$internal$$publish @ zone-microtask.js:425(anonymous function) @ zone-microtask.js:97microtask @ ng_zone.js:383Zone.run @ zone-microtask.js:1217(anonymous function) @ ng_zone.js:343zoneBoundFn @ zone-microtask.js:1194lib$es6$promise$asap$$flush @ zone-microtask.js:236
browser_adapter.js:76 Error: Template parse errors:
RangeError: Maximum call stack size exceeded ("<!-- left menu -->
<ion-menu side="left" type="reveal" [ERROR ->][content]="content">
<ion-content class="hamburger-menu">
<ion-list>
"): DeveloperApp@1:36
RangeError: Maximum call stack size exceeded ("<!-- left menu -->
[ERROR ->]<ion-menu side="left" type="reveal" [content]="content">
<ion-content class="hamburger-menu">
<"): DeveloperApp@1:0
RangeError: Maximum call stack size exceeded ("<!-- left menu -->
[ERROR ->]<ion-menu side="left" type="reveal" [content]="content">
<ion-content class="hamburger-menu">
<"): DeveloperApp@1:0
RangeError: Maximum call stack size exceeded ("<!-- left menu -->
[ERROR ->]<ion-menu side="left" type="reveal" [content]="content">
<ion-content class="hamburger-menu">
<"): DeveloperApp@1:0
RangeError: Maximum call stack size exceeded ("
<button
ion-item
[ERROR ->]*ngFor="#page of pages"
(click)="go(page.page, page.params)">
{{page.name}}
"): DeveloperApp@6:8
RangeError: Maximum call stack size exceeded ("
ion-item
*ngFor="#page of pages"
[ERROR ->](click)="go(page.page, page.params)">
{{page.name}}
</button>
"): DeveloperApp@7:8
RangeError: Maximum call stack size exceeded ("
ion-item
*ngFor="#page of pages"
(click)="go(page.page, page.params)">[ERROR ->]
{{page.name}}
</button>
</ion-list>
"): DeveloperApp@7:45
RangeError: Maximum call stack size exceeded ("
<!-- main navigation -->
<ion-nav id="nav" [ERROR ->][root]="root" #content></ion-nav>
"): DeveloperApp@15:18
at new BaseException (exceptions.js:15)
at TemplateParser.parse (template_parser.js:83)
at template_compiler.js:132
at Zone.run (zone-microtask.js:1217)
at Zone.run (ng_zone.js:343)
at zoneBoundFn (zone-microtask.js:1194)
at lib$es6$promise$$internal$$tryCatch (zone-microtask.js:442)
at lib$es6$promise$$internal$$invokeCallback (zone-microtask.js:454)
at lib$es6$promise$$internal$$publish (zone-microtask.js:425)
at zone-microtask.js:97
at microtask (ng_zone.js:383)
at Zone.run (zone-microtask.js:1217)
at Zone.run (ng_zone.js:343)
at zoneBoundFn (zone-microtask.js:1194)
at lib$es6$promise$asap$$flush (zone-microtask.js:236)BrowserDomAdapter.logError @ browser_adapter.js:76ExceptionHandler.call @ exception_handler.js:59(anonymous function) @ application_ref.js:192NgZone._notifyOnError @ ng_zone.js:430errorHandling.onError @ ng_zone.js:328Zone.run @ zone-microtask.js:1221(anonymous function) @ ng_zone.js:343zoneBoundFn @ zone-microtask.js:1194lib$es6$promise$$internal$$tryCatch @ zone-microtask.js:442lib$es6$promise$$internal$$invokeCallback @ zone-microtask.js:454lib$es6$promise$$internal$$publish @ zone-microtask.js:425(anonymous function) @ zone-microtask.js:97microtask @ ng_zone.js:383Zone.run @ zone-microtask.js:1217(anonymous function) @ ng_zone.js:343zoneBoundFn @ zone-microtask.js:1194lib$es6$promise$asap$$flush @ zone-microtask.js:236
Ng2-select was working fine until I re-installed my node modules. Now I get "No Directive annotation found on SelectComponent". Is there a solution for this?
Original select2 had an option called Hiding the search box which would disable manual user input for a dropdown. This is very useful when you have a small list of options in a dropdown and don't want the user to be able to type.
The behavior is set on initialization, but sometimes the items are not available on initialization and they are only received a bit afterwords causing errors since the behavior is governed by the first item.
instead you can move the logic to the items setter
@Input() set items(value:Array<any>) {
this._items = value;
this.itemObjects = this._items.map((item:any) => new SelectItem(item));
this.behavior = this.itemObjects.length > 0 && this.itemObjects[0].hasChildren() ?
new ChildrenBehavior(this) : new GenericBehavior(this);
}
(maybe you could somehow check if the previous behavior is like the new one for not creating a new behavior all the time, or just create both lazily and store them, then switch between the two if the items change)
I am confused with another project called ng2-selectivity. Can you explain the difference?
Can you please update angular2 version to angular beta 11
Click the down arrow. no dropdown data. no error on console.
Select2 highlights the currently selected item in the dropdown with a different color than the mouse hover. This adds to the usability allowing a user to know which item is currently selected.
In the image below you can see that the selected item, Alaska, has a gray background color and the item I am currently hovering on, California, has a blue color.
Can you make it possible to add custom values when 'multiple' is set to true?
So when a user enters a value and not suggestions occur for that value, a custom value is added to the list, and added to the 'value' array when the (data) event is called.
As far as I know, the ng2-select
package exports a directive called ng-select
instead of ng2-select
.
I encountered this issue on your demo page
Hi,
I used more selects(single) on one page and clicking on one of these activate all selects on page.
Any solution for this?
I am using component select-input:
<ng-select [allow-clear]="true" [items]="selectItems" [initData]="modelValue" (data)="refreshValue($event)" placeholder="{{placeholder ? placeholder : ''}}"> </ng-select>
B.
As soon as I import either Select
or SELECT_DIRECTIVES
I get the following compile errors
error TS6059: File '/node_modules/ng2-select/components/select.ts' is not under 'rootDir' 'src'. 'rootDir' is expected to contain all source files.
error TS6059: File '/node_modules/ng2-select/components/select/select-interfaces.ts' is not under 'rootDir' 'src'. 'rootDir' is expected to contain all source files.
error TS6059: File '/node_modules/ng2-select/components/select/select-item.ts' is not under 'rootDir' 'src'. 'rootDir' is expected to contain all source files.
error TS6059: File '/node_modules/ng2-select/components/select/select-pipes.ts' is not under 'rootDir' 'src'. 'rootDir' is expected to contain all source files.
error TS6059: File '/node_modules/ng2-select/components/select/select.ts' is not under 'rootDir' 'src'. 'rootDir' is expected to contain all source files.
Here is my tsconfig
{
"compilerOptions": {
"rootDir": "src",
"outDir": "build",
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true
},
"exclude": [
"node_modules",
"typings/browser.d.ts",
"typings/browser"
]
}
In multiple mode, click on input and press Enter
https://drive.google.com/file/d/0B5sf8URbEXr8T3lDdHFON0xZc2M/view?usp=sharing
then press Enter again and again
https://drive.google.com/file/d/0B5sf8URbEXr8aUN1RVZLZThmanc/view?usp=sharing
Hi guys! I am just starting with Angular 2 and I am getting a lot of pain trying to install this component but I don't know where is the problem!
Just installed through npm and included da CSS file on my index.html.
There is my Component:
`import {Component} from 'angular2/core';
import {Select} from "ng2-select/ng2-select";
@component({
templateUrl: 'src/views/lead/lists.view.html',
directives: [Select],
})
export class LeadListsComponent {
team: string = "Ringo";
teams: string[] = ["John", "Paul", "George", "Ringo"];
}`
And I am facing this issue:
angular2-polyfills.js:332 Error: SyntaxError: Unexpected token <(…)ZoneDelegate.invoke @ angular2-polyfills.js:332Zone.run @ angular2-polyfills.js:227(anonymous function) @ angular2-polyfills.js:576ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263drainMicroTaskQueue @ angular2-polyfills.js:482ZoneTask.invoke @ angular2-polyfills.js:434 browser-sync-client.2.11.2.js:1 XHR finished loading: POST "http://localhost:3000/browser-sync/socket.io/?EIO=3&transport=polling&t=LE_vEJl&sid=HBaWZ-iVa8xKruebAAC6".Request.create @ browser-sync-client.2.11.2.js:1Request @ browser-sync-client.2.11.2.js:1XHR.request @ browser-sync-client.2.11.2.js:1XHR.doWrite @ browser-sync-client.2.11.2.js:1(anonymous function) @ browser-sync-client.2.11.2.js:1(anonymous function) @ browser-sync-client.2.11.2.js:2proxy @ browser-sync-client.2.11.2.js:1(anonymous function) @ browser-sync-client.2.11.2.js:2(anonymous function) @ browser-sync-client.2.11.2.js:2exports.encodePacket @ browser-sync-client.2.11.2.js:2encodeOne @ browser-sync-client.2.11.2.js:2eachWithIndex @ browser-sync-client.2.11.2.js:2map @ browser-sync-client.2.11.2.js:2exports.encodePayload @ browser-sync-client.2.11.2.js:2Polling.write @ browser-sync-client.2.11.2.js:1Transport.send @ browser-sync-client.2.11.2.js:1Socket.flush @ browser-sync-client.2.11.2.js:1Socket.sendPacket @ browser-sync-client.2.11.2.js:1Socket.write.Socket.send @ browser-sync-client.2.11.2.js:1(anonymous function) @ browser-sync-client.2.11.2.js:3Encoder.encode @ browser-sync-client.2.11.2.js:3Manager.packet @ browser-sync-client.2.11.2.js:3Socket.packet @ browser-sync-client.2.11.2.js:3Socket.emit @ browser-sync-client.2.11.2.js:3(anonymous function) @ browser-sync-client.2.11.2.js:24Emitter.emit @ browser-sync-client.2.11.2.js:3Socket.onevent @ browser-sync-client.2.11.2.js:3Socket.onpacket @ browser-sync-client.2.11.2.js:3(anonymous function) @ browser-sync-client.2.11.2.js:3Emitter.emit @ browser-sync-client.2.11.2.js:3Manager.ondecoded @ browser-sync-client.2.11.2.js:2(anonymous function) @ browser-sync-client.2.11.2.js:3Emitter.emit @ browser-sync-client.2.11.2.js:2Decoder.add @ browser-sync-client.2.11.2.js:3Manager.ondata @ browser-sync-client.2.11.2.js:2(anonymous function) @ browser-sync-client.2.11.2.js:3Emitter.emit @ browser-sync-client.2.11.2.js:2Socket.onPacket @ browser-sync-client.2.11.2.js:1(anonymous function) @ browser-sync-client.2.11.2.js:1Emitter.emit @ browser-sync-client.2.11.2.js:2Transport.onPacket @ browser-sync-client.2.11.2.js:1callback @ browser-sync-client.2.11.2.js:1(anonymous function) @ browser-sync-client.2.11.2.js:2exports.decodePayloadAsBinary @ browser-sync-client.2.11.2.js:2exports.decodePayload @ browser-sync-client.2.11.2.js:2Polling.onData @ browser-sync-client.2.11.2.js:1(anonymous function) @ browser-sync-client.2.11.2.js:1Emitter.emit @ browser-sync-client.2.11.2.js:2Request.onData @ browser-sync-client.2.11.2.js:1Request.onLoad @ browser-sync-client.2.11.2.js:1xhr.onreadystatechange @ browser-sync-client.2.11.2.js:1wrapFn @ angular2-polyfills.js:771ZoneDelegate.invokeTask @ angular2-polyfills.js:365Zone.runTask @ angular2-polyfills.js:263ZoneTask.invoke @ angular2-polyfills.js:431
Somebody have any clue?
Html entities show up correctly in the drop down menu of for select multiple but not in the boxes for the selected state.
eg ℃ showing as ℃
Is it possible to load data on combox only when I click. I try but the list not refresh. I must click a second time to see the changed list
If I'm a keyboard only user, I can't see the options until I start typing. The options start filtering and I can see some of them. I can delete what I typed and then see all the options and cycle through them with the arrow keys (nice).
I expected arrow keys to show the options like a standard <select>
element would behave. This would make the select box a bit more accessible to keyboard only users.
I tried to use this but i get :
EXCEPTION: Error during evaluation of "keyup" angular2.dev.js:23514:9
ORIGINAL EXCEPTION: TypeError: e.srcElement is undefined angular2.dev.js:23514:9
ORIGINAL STACKTRACE: angular2.dev.js:23514:9
Select.prototype.mainClick@http://localhost:5555/node_modules/ng2-select/components/select/select.js:101:9
anonymous/ChangeDetector_Select_1.prototype.handleEventInternal@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js line 10897 > Function:432:18
AbstractChangeDetector</AbstractChangeDetector.prototype.handleEvent@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js:8788:17
AppView</AppView.prototype.dispatchEvent@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js:9396:19
AppView</AppView.prototype.dispatchRenderEvent@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js:9391:14
DefaultRenderView</DefaultRenderView.prototype.dispatchRenderEvent@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js:7819:32
createRenderView/eventDispatcher@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js:9781:14
createEventHandler/<@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js:9852:14
decoratePreventDefault/<@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js:15370:34
DomEventsPlugin</DomEventsPlugin.prototype.addEventListener/outsideHandler/<@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js:7874:18
run@http://localhost:5555/node_modules/angular2/bundles/angular2-polyfills.js:138:14
NgZone</NgZone.prototype._createInnerZone/<.$run/<@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js:5719:22
NgZone</NgZone.prototype.run@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js:5681:18
DomEventsPlugin</DomEventsPlugin.prototype.addEventListener/outsideHandler@http://localhost:5555/node_modules/angular2/bundles/angular2.dev.js:7873:1
run@http://localhost:5555/node_modules/angular2/bundles/angular2-polyfills.js:138:14
zoneBoundFn@http://localhost:5555/node_modules/angular2/bundles/angular2-polyfills.js:111:14
angul
The demo page does not work very well in Firefox (tried 45 and 34). Nothing happens clicking at the Single or Children tab. Only thing working is the Multiple tab.
It works in Chrome...
I am finding it difficult to add HTML5 based required attribute on ng-select directive. Does anyone know how can this achieved...?
When combining ng2-select with routerOnReuse
and changing the items on each reuse the select will crash when the template calls isActive(o)
.
Currently its like this:
private isActive(value:SelectItem):boolean {
return this.activeOption.text === value.text;
}
Easy solution would be doing:
private isActive(value:SelectItem):boolean {
return this.activeOption && this.activeOption.text === value.text;
}
Hi, is there a way to clear selection inside a function?, for example i need to clear my selection after a variable changes.
Hello,
I am trying to include this component in my project. I have created select component and it does not load. I am getting this error:
This is the code for component:
import {Component} from 'angular2/core';
import {SELECT_DIRECTIVES} from 'ng2-select';
@Component({
selector: 'my-select',
directives: [SELECT_DIRECTIVES],
template: `
<h3>Select a hero</h3>
<ng-select></ng-select>
`
})
export class SelectComponent {
}
I am using routes to navigate to that component. The project is located here - https://github.com/stanimirtt/Angular-2-App
I have notice that if I remove directives: [SELECT_DIRECTIVES] it loads. In the other way, stuck to loadin... Thanks in advance for the help!
In addition, clicking on the first one always locates my cursor for typing in the last one.
The demo in this fork / branch shows the problem: https://github.com/rlodge/ng2-select/tree/issue-22-demo
Hi,
I'm getting GET http://localhost:3000/ng2-select/ng2-select.js 404 (Not Found)fetchTextFromURL @
if I tweak systemjs and
Uncaught SyntaxError: Unexpected token < Evaluating http://localhost:3000/ng2-select/ng2-select Error loading http://localhost:3000/app/main.jsZone.run
without tweaking.
Import statement
import {SELECT_DIRECTIVES} from "ng2-select/ng2-select";
Angular 2 beta7. To reproduce just walk through latest getting started guide, and try to import the module without copying files to the app/ source folder.
I have posted my que here http://stackoverflow.com/questions/35551444/how-to-set-the-selected-value-of-the-ng2-select
If the first element of the input array has the property children defined but empty, it won't display as a group select.
This is due to the fact that on the template the ngIf has itemObjects[0].hasChildren()
public hasChildren():boolean {
return this.children && this.children.length > 0;
}
Not sure if its worth fixing, but if you don't filter that from the server response, your select won't display properly.
Is it worth fixing? One solution would be checking the entire array to see if any of it has children.
When a user types text in the search that doesn't match any options in the dropdown, the user is just left with an input filled with their text. It is poor usability because it will confuse the user thinking that it will accept the typed option. Instead, the functionality should be like the existing select2 one where a No Results Found message is displayed.
I'm trying to use HTML-rich strings in my "text" elements as shown:
But, when search for a value (ie "blue"), then results content are invalid, as shown:
I should have "blue 10" through "blue 100", but for some yet to be debugged reason, it only shows every other entry. I'm thinking that the string filtering is getting confused.
My "text" entries are as such:
`<colorbox style='background-color:${c.hex};'></colorbox> ${c.name} (${c.hex})`
it is often important to be able to select a value programmatically.
as an example, in my project, i have a dropdown whose values may be updaed by an RxJs.Observable stream that may be driven by other components.
Currently there is no way to change the selection with means other than direct interaction with the ui
Hi all,
I have got an issue using multiple ng-select on one screen.
If there are two instances of ng-select and I click on one of them, both are being opened for selection.
Problem can be reproduced like this: https://gist.github.com/anonymous/1654ac588f27ac628079
Thanks a lot!
Lu.
Angular2 has switched to camel case from kebab case.
In documentation of "Properties" data should be initData. Further it seems an array is expected always.
When using initData for setting initial value and multiple input set to false, removed event is not fired when removing selected option (when another option/or the same option is selected by mouseclick, everything works fine). When handling clck event, activeoption is not set yet and the event can not be fired.
<div tabindex="0"
*ngIf="multiple === false"
(keyup)="mainClick($event)"
class="ui-select-container ui-select-bootstrap dropdown open">
<div [ngClass]="{'ui-disabled': disabled}"></div>
<div class="ui-select-match"
*ngIf="!inputMode">
<span tabindex="-1"
class="btn btn-default btn-secondary form-control ui-select-toggle"
(^click)="matchClick()"
style="outline: 0;">
<span *ngIf="active.length <= 0" class="ui-select-placeholder text-muted">{{placeholder}}</span>
<span *ngIf="active.length > 0" class="ui-select-match-text pull-left"
[ngClass]="{'ui-select-allow-clear': allowClear && active.length > 0}"
[innerHTML]="active[0].text"></span>
<i class="dropdown-toggle pull-right"></i>
<i class="caret pull-right"></i>
<a *ngIf="allowClear && active.length>0" style="margin-right: 10px; padding: 0;"
(click)="remove(activeOption)" class="btn btn-xs btn-link pull-right">
<i class="glyphicon glyphicon-remove"></i>
</a>
</span>
</div>
I suggest for the template.
(click)="remove(active[0])" class="btn btn-xs btn-link pull-right">
Am I using the component incorrectly or is this really a bug? Thanks a lot.
After banging my head for most of a day, I've stumbled upon an odd side-effect caused by using "RegExp.text() in select.ts:filter()
(line ~515). Seems RegExp keeps a back reference from the last test, which negates the next test! Changing the code to use .match() resolves this issue, at the theoretical expense of performance.
This can be verified / tested using the following plunker
Ng2 test() v match() test
References:
Using [disabled]="disabled" don't add disabled on search input.
Indeed, in the template, the code is [disabled]="disabled"
and should be [disabled]="_disabled"
.
I was trying to put an ng2-select inside a dropdown. that didn't work since opening the select dropdown is a global event and I don't want the dropdown to close when clicking on the select so I stopped the click from propagating.
This is my quick&dirty fix:
this.offSideClickHandler = this.getOffSideClickHandler(this);
document.addEventListener('click', this.offSideClickHandler);
this.clickHandler = this.getClickHandler(this);
this.element.nativeElement.addEventListener('click', this.clickHandler);
private getClickHandler(context:any) {
return function (e:any) {
if (e.target && e.target.nodeName === 'INPUT'
&& e.target.className && e.target.className.indexOf('ui-select') >= 0) {
return;
}
if (e.srcElement && e.srcElement.className &&
e.srcElement.className.indexOf('ui-select') >= 0) {
if (e.target.nodeName !== 'INPUT') {
context.matchClick(null);
}
return;
}
};
}
private getOffSideClickHandler(context:any) {
return function (e:any) {
if (e.target && e.target.nodeName === 'INPUT'
&& e.target.className && e.target.className.indexOf('ui-select') >= 0) {
return;
}
if (e.srcElement && e.srcElement.className &&
e.srcElement.className.indexOf('ui-select') >= 0) {
return;
}
context.inputMode = false;
context.optionsOpened = false;
};
}
It works for me. what do you think?
Your own example does not display 'Athens' as the selected option on the multiple tab.
Is there a way to manually set the default?
SO: http://stackoverflow.com/questions/37380576/how-to-set-default-for-ng2-select
I'm trying to create a select drop down that populates based off of an http request.
Relevant code is
public clients: any[] = [];
ngOnInit() {
this._clientListService.getClients()
.subscribe(res => {
this.clients = res;
console.log(this.clients)
})
}
<ng-select [allowClear]="true"
[items]="clients"
(data)="refreshValue($event)"
placeholder="Please select a client">
</ng-select>
However, the dropdown options are blank. Populating this on a works fine: <select class="form-control"> <option *ngFor="let client of clients" value="client.client_id">{{client.client_id}} - {{client.client_id_name}}</option> </select> Any clues? I'm guessing it's change detection not kicking in. Ftr, I'm seeing you refer to a "query" option, but I can't find it anywhere. I find a couple mentions in your source, but not as input/output shrug
hello, if i reference the ng2-select i get duplicate identifier errors etc in my Visual Studio 2015,
i did it like " import {select} from 'ng2-select/ng2-select';"
but the other package from valor-software "ng2-bootstrap" works like :
import { TYPEAHEAD_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
anyone got a suggestion?
The click on the right arrow don't work.
The problem is on the method getOffSideClickHandler(context:any).
The test to call matchClick should be :
e.srcElement.className.indexOf('ui-select') >= 0 should be e.srcElement.className.indexOf('ui-select') >= 0 || e.srcElement.className.indexOf('caret pull-right') >= 0
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.