ng select
v14.0.0
Siehe Demoseite.
| Eckig | ng-select |
|---|---|
| >=19.0.0 <20.0.0 | v14.x |
| >=18.0.0 <19.0.0 | v13.x |
| >=17.0.0 <18.0.0 | v12.x |
| >=16.0.0 <17.0.0 | v11.x |
| >=15.0.0 <16.0.0 | v10.x |
| >=14.0.0 <15.0.0 | v9.x |
| >=13.0.0 <14.0.0 | v8.x |
| >=12.0.0 <13.0.0 | v7.x |
| >=11.0.0 <12.0.0 | v6.x |
| >=10.0.0 <11.0.0 | v5.x |
| >=9.0.0 <10.0.0 | v4.x |
| >=8.0.0 <9.0.0 | v3.x |
| >=6.0.0 <8.0.0 | v2.x |
| v5.xx | v1.x |
ng-select unterstützt alle von Angular unterstützten Browser. Die aktuelle Liste finden Sie unter https://angular.io/guide/browser-support#browser-support. Dies umfasst die folgenden spezifischen Versionen:
Chrome 2 most recent versions
Firefox latest and extended support release (ESR)
Edge 2 most recent major versions
Safari 2 most recent major versions
iOS 2 most recent major versions
Android 2 most recent major versions
Die Bibliothek befindet sich in der aktiven Entwicklung und kann nach 1.0.0 API-Breaking-Änderungen für nachfolgende Hauptversionen aufweisen.
ng-select installieren: npm install --save @ng-select/ng-selectyarn add @ng-select/ng-select import { NgLabelTemplateDirective , NgOptionTemplateDirective , NgSelectComponent } from '@ng-select/ng-select' ;
import { FormsModule } from '@angular/forms' ;
@ Component ( {
selector : 'example' ,
standalone : true ,
template : './example.component.html' ,
styleUrl : './example.component.scss' ,
imports : [
NgLabelTemplateDirective ,
NgOptionTemplateDirective ,
NgSelectComponent ,
] ,
} )
export class ExampleComponent { } import { NgSelectModule } from '@ng-select/ng-select' ;
import { FormsModule } from '@angular/forms' ;
@ NgModule ( {
declarations : [ AppComponent ] ,
imports : [ NgSelectModule , FormsModule ] ,
bootstrap : [ AppComponent ]
} )
export class AppModule { } Um Anpassungen und Themen zu ermöglichen, enthält ng-select -Bundle nur generische Stile, die für das korrekte Layout und die korrekte Positionierung erforderlich sind. Um einen vollständigen Überblick über das Steuerelement zu erhalten, fügen Sie eines der Themen in Ihre Anwendung ein. Wenn Sie die Angular-CLI verwenden, können Sie dies zu Ihrer styles.scss hinzufügen oder in .angular-cli.json (Angular v5 und niedriger) oder angular.json (Angular v6 und höher) einbinden.
@import " ~@ng-select/ng-select/themes/default.theme.css " ;
// ... or
@import " ~@ng-select/ng-select/themes/material.theme.css " ;
Sie können auch globale Konfigurations- und Lokalisierungsmeldungen festlegen, indem Sie den NgSelectConfig-Dienst normalerweise in Ihre Stammkomponente einfügen und die Werte seiner Eigenschaften anpassen, um Standardwerte bereitzustellen.
constructor ( private config : NgSelectConfig ) {
this . config . notFoundText = 'Custom not found' ;
this . config . appendTo = 'body' ;
// set the bindValue to global config when you use the same
// bindValue in most of the place.
// You can also override bindValue for the specified template
// by defining `bindValue` as property
// Eg : <ng-select bindValue="some-new-value"></ng-select>
this . config . bindValue = 'value' ;
}Definieren Sie Optionen in Ihrer verbrauchenden Komponente:
@ Component ( { ... } )
export class ExampleComponent {
selectedCar : number ;
cars = [
{ id : 1 , name : 'Volvo' } ,
{ id : 2 , name : 'Saab' } ,
{ id : 3 , name : 'Opel' } ,
{ id : 4 , name : 'Audi' } ,
] ;
} Verwenden Sie in der Vorlage ng-select Komponente mit Ihren Optionen
<!--Using ng-option and for loop-->
< ng-select [(ngModel)] =" selectedCar " >
@for (car of cars; track car.id) {
< ng-option [value] =" car.id " > {{car.name}} </ ng-option >
}
</ ng-select >
<!--Using items input-->
< ng-select [items] =" cars "
bindLabel =" name "
bindValue =" id "
[(ngModel)] =" selectedCar " >
</ ng-select >Ausführlichere Beispiele finden Sie auf der Demoseite
Wenn Sie SystemJS verwenden, sollten Sie Ihre Konfiguration auch so anpassen, dass sie auf das UMD-Bundle verweist.
In Ihrer systemjs-Konfigurationsdatei muss map dem Systemlader mitteilen, wo nach ng-select gesucht werden soll:
map: {
'@ng-select/ng-select' : 'node_modules/@ng-select/ng-select/bundles/ng-select.umd.js' ,
} | Eingang | Typ | Standard | Erforderlich | Beschreibung |
|---|---|---|---|---|
| [addTag] | boolean | ((term: string) => any | Promise<any>) | false | NEIN | Ermöglicht das Erstellen benutzerdefinierter Optionen. |
| addTagText | string | Add item | NEIN | Legen Sie benutzerdefinierten Text fest, wenn Sie Tagging verwenden |
| Aussehen | string | underline | NEIN | Ermöglicht die Auswahl des Dropdown-Erscheinungsbilds. Auf outline setzen, um einen Rahmen statt einer Unterstreichung hinzuzufügen (gilt nur für das Material-Design) |
| appendTo | string | null | NEIN | Hängen Sie das Dropdown-Menü mit dem CSS-Selektor an den Textkörper oder ein anderes Element an. Für eine korrekte Positionierung sollte body position:relative haben |
| bufferAmount | string | null | NEIN | Hängen Sie das Dropdown-Menü mit dem CSS-Selektor an den Textkörper oder ein anderes Element an. Für eine korrekte Positionierung sollte body position:relative haben |
| bindValue | string | - | NEIN | Objekteigenschaft, die für das ausgewählte Modell verwendet werden soll. Standardmäßig wird es an das gesamte Objekt gebunden. |
| bindLabel | string | label | NEIN | Objekteigenschaft, die für die Beschriftung verwendet werden soll. label |
| [closeOnSelect] | boolean | WAHR | NEIN | Ob das Menü geschlossen werden soll, wenn ein Wert ausgewählt wird |
| clearAllText | string | Clear all | NEIN | Legen Sie benutzerdefinierten Text für den Titel des Symbols „Alles löschen“ fest |
| [klärbar] | boolean | true | NEIN | Ermöglicht das Löschen des ausgewählten Werts. Standardmäßig true |
| [clearOnBackspace] | boolean | true | NEIN | Löschen Sie die ausgewählten Werte einzeln, indem Sie auf die Rücktaste klicken. Standardmäßig true |
| [compareWith] | (a: any, b: any) => boolean | (a, b) => a === b | NEIN | Eine Funktion zum Vergleichen der Optionswerte mit den ausgewählten Werten. Das erste Argument ist ein Wert aus einer Option. Der zweite ist ein Wert aus der Auswahl (Modell). Es sollte ein boolescher Wert zurückgegeben werden. |
| dropdownPosition | bottom | top | auto | auto | NEIN | Legen Sie die Dropdown-Position auf „Öffnen“ fest |
| [fixedPlaceholder] | boolean | false | NEIN | Platzhalter auch dann sichtbar machen, wenn ein Element ausgewählt ist |
| [groupBy] | string | Function | null | NEIN | Ermöglicht das Gruppieren von Elementen nach Schlüssel oder Funktionsausdruck |
| [Gruppenwert] | (groupKey: string, children: any[]) => Object | - | NEIN | Funktionsausdruck zur Bereitstellung eines Gruppenwerts |
| [selectableGroup] | boolean | FALSCH | NEIN | Ermöglicht die Auswahl einer Gruppe, wenn „groupBy“ verwendet wird |
| [selectableGroupAsModel] | boolean | WAHR | NEIN | Gibt an, ob alle untergeordneten Elemente oder die Gruppe selbst ausgewählt werden sollen |
| [Artikel] | Array<any> | [] | Ja | Artikel-Array |
| [Laden] | boolean | - | NEIN | Sie können den Ladestatus von außen festlegen (z. B. Laden asynchroner Elemente). |
| LoadingText | string | Loading... | NEIN | Legen Sie beim Laden von Elementen einen benutzerdefinierten Text fest |
| labelForId | string | - | NEIN | ID, um das Steuerelement mit der Bezeichnung zu verknüpfen. |
| [markFirst] | boolean | true | NEIN | Markiert das erste Element beim Öffnen/Filtern als fokussiert. |
| [isOpen] | boolean | - | NEIN | Ermöglicht die manuelle Steuerung des Öffnens und Schließens des Dropdowns. true – wird nicht geschlossen. false – lässt sich nicht öffnen. |
| maxSelectedItems | number | keiner | NEIN | Wenn multiple = true, ermöglicht dies das Festlegen einer begrenzten Auswahlanzahl. |
| [hideSelected] | boolean | false | NEIN | Ermöglicht das Ausblenden ausgewählter Elemente. |
| [mehrere] | boolean | false | NEIN | Ermöglicht die Auswahl mehrerer Elemente. |
| notFoundText | string | No items found | NEIN | Legen Sie benutzerdefinierten Text fest, wenn der Filter ein leeres Ergebnis zurückgibt |
| Platzhalter | string | - | NEIN | Platzhaltertext. |
| [durchsuchbar] | boolean | true | NEIN | Ermöglichen Sie die Suche nach Wert. Standardmäßig true |
| [schreibgeschützt] | boolean | false | NEIN | Legen Sie ng-select als schreibgeschützt fest. Wird hauptsächlich bei reaktiven Formen verwendet. |
| [searchFn] | (term: string, item: any) => boolean | null | NEIN | Filtern nach benutzerdefinierter Suchfunktion zulassen |
| [searchWhileComposing] | boolean | true | NEIN | Ob Elemente gefiltert werden sollen, während die Komposition gestartet wird |
| [trackByFn] | (item: any) => any | null | NEIN | Stellen Sie eine benutzerdefinierte trackBy-Funktion bereit |
| [clearSearchOnAdd] | boolean | true | NEIN | Löscht die Sucheingabe, wenn ein Element ausgewählt wird. Standardmäßig true . Standardmäßig false wenn „closeOnSelect false ist |
| [deselectOnClick] | boolean | false | NEIN | Hebt die Auswahl eines ausgewählten Elements auf, wenn im Dropdown-Menü darauf geklickt wird. Standardmäßig false . Standardmäßig true wenn „multiple“ true ist |
| [editableSearchTerm] | boolean | false | NEIN | Bearbeitung der Suchabfrage zulassen, wenn diese Option ausgewählt ist. Standardmäßig false . Funktioniert nur, wenn multiple den Wert false hat. |
| [selectOnTab] | boolean | false | NEIN | Wählen Sie mit der Tabulatortaste das markierte Dropdown-Element aus. Standardmäßig false |
| [openOnEnter] | boolean | true | NEIN | Öffnen Sie das Dropdown-Menü mit der Eingabetaste. Standardmäßig true |
| [tippen] | Subject | - | NEIN | Benutzerdefinierte automatische Vervollständigung oder erweiterter Filter. |
| [minTermLength] | number | 0 | NEIN | Mindestbegriffslänge zum Starten einer Suche. Sollte mit typeahead verwendet werden |
| typeToSearchText | string | Type to search | NEIN | Legen Sie benutzerdefinierten Text fest, wenn Sie Typeahead verwenden |
| [virtualScroll] | boolean | FALSCH | NEIN | Aktivieren Sie den virtuellen Bildlauf für eine bessere Leistung beim Rendern großer Datenmengen |
| [inputAttrs] | { [key: string]: string } | - | NEIN | Übergeben Sie benutzerdefinierte Attribute an das zugrunde liegende input |
| [tabIndex] | number | - | NEIN | Tabindex auf ng-select setzen |
| [preventToggleOnRightClick] | boolean | false | NEIN | Verhindern Sie das Öffnen von ng-select bei einem rechten Mausklick |
| [keyDownFn] | ($event: KeyboardEvent) => bool | true | NEIN | Stellen Sie eine benutzerdefinierte KeyDown-Funktion bereit. Wird vor dem Standardhandler ausgeführt. Geben Sie „false“ zurück, um die Ausführung der standardmäßigen Key-Down-Handler zu unterdrücken |
| Ausgabe | Beschreibung |
|---|---|
| (hinzufügen) | Wird ausgelöst, wenn ein Element hinzugefügt wird, während [multiple]="true" . Gibt das hinzugefügte Element aus |
| (verwischen) | Auf ausgewählte Unschärfe abgefeuert |
| (ändern) | Wegen Modellwechsel gefeuert. Gibt das gesamte Modell aus |
| (schließen) | Wird beim Schließen des ausgewählten Dropdown-Menüs ausgelöst |
| (klar) | Wird beim Klicken auf ein klares Symbol ausgelöst |
| (Fokus) | Bei ausgewähltem Fokus abgefeuert |
| (suchen) | Beim Eingeben des Suchbegriffs ausgelöst. Gibt den Suchbegriff mit gefilterten Elementen aus |
| (offen) | Wird beim Öffnen der Auswahl-Dropdown-Liste ausgelöst |
| (entfernen) | Wird ausgelöst, wenn das Element entfernt wird, während [multiple]="true" |
| (scrollen) | Wird beim Scrollen ausgelöst. Stellt den Start- und Endindex der aktuell verfügbaren Elemente bereit. Kann zum Laden weiterer Elemente in Blöcken verwendet werden, bevor der Benutzer ganz bis zum Ende der Liste gescrollt hat. |
| (scrollToEnd) | Wird ausgelöst, wenn bis zum Ende der Elemente gescrollt wird. Kann zum Laden weiterer Artikel in Stücken verwendet werden. |
| Name | Beschreibung |
|---|---|
| offen | Öffnet das Auswahl-Dropdown-Panel |
| schließen | Schließt das Auswahl-Dropdown-Panel |
| Fokus | Fokussiert das ausgewählte Element |
| verwischen | Verwischt das ausgewählte Element |
| Name | Typ | Beschreibung |
|---|---|---|
| [ngOptionHighlight] | Richtlinie | Markiert den Suchbegriff in der Option. Akzeptiert Suchbegriff. Sollte für das Optionselement verwendet werden. README |
| NgSelectConfig | Konfiguration | Konfigurationsanbieter für die NgSelect-Komponente. Sie können diesen Dienst einbinden und eine anwendungsweite Konfiguration bereitstellen. |
| SELECTION_MODEL_FACTORY | Service | DI-Token für die SelectionModel-Implementierung. Sie können eine benutzerdefinierte Implementierung bereitstellen, die das Auswahlverhalten ändert. |
Ng-select ermöglicht die Bereitstellung einer benutzerdefinierten Auswahlimplementierung mithilfe von SELECTION_MODEL_FACTORY . Um die Standardlogik zu überschreiben, stellen Sie Ihre Factory-Methode in Ihrem Winkelmodul bereit.
// app.module.ts
providers: [
{ provide : SELECTION_MODEL_FACTORY , useValue : < SelectionModelFactory > CustomSelectionFactory }
]
// selection-model.ts
export function CustomSelectionFactory ( ) {
return new CustomSelectionModel ( ) ;
}
export class CustomSelectionModel implements SelectionModel {
...
} Die Ng-select-Komponente implementiert OnPush Änderungserkennung, was bedeutet, dass die Dirty-Checking-Prüfung auf unveränderliche Datentypen prüft. Das heißt, wenn Sie Objektmutationen durchführen wie:
this . items . push ( { id : 1 , name : 'New item' } )Die Komponente erkennt keine Änderung. Stattdessen müssen Sie Folgendes tun:
this . items = [ ... this . items , { id : 1 , name : 'New item' } ] ; Dadurch erkennt die Komponente die Änderung und aktualisiert sie. Einige mögen befürchten, dass dies ein kostspieliger Vorgang ist, er ist jedoch viel leistungsfähiger als die Ausführung von ngDoCheck und die ständige Änderung des Arrays.
Wenn Sie mit den Standardstilen nicht zufrieden sind, können Sie diese einfach durch eine erhöhte Selektorspezifität überschreiben oder Ihr eigenes Thema erstellen. Dies gilt, wenn Sie kein ViewEncapsulation verwenden oder Stile zum globalen Stylesheet hinzufügen. Z.B
< ng-select class =" custom " > </ ng-select > . ng-select . custom {
border : 0 px ;
min-height : 0 px ;
border-radius : 0 ;
}
. ng-select . custom . ng-select-container {
min-height : 0 px ;
border-radius : 0 ;
} Wenn Sie ViewEncapsulation verwenden, können Sie einen speziellen ::ng-deep -Selektor verwenden, der das Scoping für verschachtelte Selektoren verhindert. Dies stellt jedoch eher eine Problemumgehung dar und wir empfehlen die Verwendung der oben beschriebenen Lösung.
. ng-select . custom :: ng-deep . ng-select-container {
min-height : 0 px ;
border-radius : 0 ;
}WARNUNG: Beachten Sie, dass ng-deep veraltet ist und es noch keine Alternative dazu gibt. Siehe hier.
Wenn Sie reaktive Formularvalidatoren oder vorlagengesteuerte Formularvalidatoren verwenden, wird standardmäßig die CSS-Klasse ng-invalid auf ng-select angewendet. Sie können den Fehlerstatus anzeigen, indem Sie einen benutzerdefinierten CSS-Stil hinzufügen
ng-select . ng-invalid . ng-touched . ng-select-container {
border-color : # dc3545 ;
box-shadow : inset 0 1 px 1 px rgba ( 0 , 0 , 0 , 0.075 ) , 0 0 0 3 px # fde6e8 ;
}Beiträge sind willkommen. Sie können beginnen, indem Sie sich Probleme mit der Bezeichnung „Hilfe gesucht“ ansehen oder ein neues Problem mit einem Vorschlag oder Fehlerbericht erstellen. Beachten Sie, dass wir das Commit-Format https://conventionalcommits.org/ verwenden.
Führen Sie die Schritte vom Klonen zum Starten mit diesen Terminalbefehlen aus.
git clone https://github.com/ng-select/ng-select
cd ng-select
yarn
yarn run start
yarn run test
or
yarn run test:watch
Um es auf npm zu veröffentlichen, führen Sie einfach ./release.sh aus, natürlich wenn Sie über Berechtigungen verfügen ;)
Diese Komponente ist von React Select und Virtual Scroll inspiriert. Schauen Sie sich ihre tolle Arbeit und Komponenten an :)
