Angular4_支持多选,分组,自动完成,带图标,清理输入框可配置的select

Angular4_支持多选,分组,自动完成,过滤,带图标,清理输入框可配置的select

Documentation

Usage

Installngx-select-exthroughnpmpackage manager using the following command:
```
npm i ngx-select-ex --save
```
For usage with Angular 4 install using the following command:
```
npm i ngx-select-ex@ng4 --save
```

Add NgxSelectModule into your AppModule class. app.module.ts would look like this:

import {NgModule} from '@angular/core';
 import {browserModule} from '@angular/platform-browser';
 import {AppComponent} from './app.component';
 import { NgxSelectModule } from 'ngx-select-ex';

 @NgModule({
   imports: [browserModule,NgxSelectModule],declarations: [AppComponent],bootstrap: [AppComponent],})
 export class AppModule {
 }

If you want to change the default options then use next code:

import {NgModule} from '@angular/core';
 import {browserModule} from '@angular/platform-browser';
 import {AppComponent} from './app.component';
 import { NgxSelectModule,INgxSelectOptions } from 'ngx-select-ex';

 const CustomSelectOptions: INgxSelectOptions = { // Check the interface for more options
     optionValueField: 'id',optionTextField: 'name'
 };

 @NgModule({
   imports: [browserModule,NgxSelectModule.forRoot(CustomSelectOptions)],})
 export class AppModule {
 }

Include Bootstrap styles. For example add to your index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

Add the tag<ngx-select>into some html

<ngx-select [items]="items" [(ngModel)]="itemId">

More information regarding of usingngx-select-exis located indemo.

API

Any item can bedisabledfor prevent selection. For disable an item add the propertydisabledto the item.

optionValueFieldoptionTextFieldoptGroupLabelField[allowClear][placeholder][noAutoComplete][disabled][defaultValue]autoSelectSingleOptionautoClearSearchnoresultsFoundsizesearchCallback

Input	Type	Default	Description
[items]	any[]	`[]`	Items array. Should be an array of objects with`id`and`text`properties. As convenience,you may also pass an array of strings,in which case the same string is used for both the ID and the text. Items may be nested by adding a`options`property to any item,whose value should be another array of items. Items that have children may omit to have an ID.
string	'id'	Provide an opportunity to change the name an`id`property of objects in the`items`
'text'	Provide an opportunity to change the name a`text`property of objects in the`items`
'label'	labelproperty of objects with an`options`property in the`optGroupOptionsField`	'options'	Provide an opportunity to change the name of an`options`property of objects in the`[multiple]`	boolean	false	Mode of this component. If set`true`user can select more than one option
Set to`true`to allow the selection to be cleared. This option only applies to single-value inputs
''	truePlaceholder text to display when the element has no focus and selected items
trueSet to`true`to hide the search input. This option only applies to single-value inputs
When`true`,it specifies that the component should be disabled
Use to set default value
Auto select a non disabled single option
Auto clear a search text after select an option. Has effect for`multiple = true`
'No results found'	The default text showed when a search has no results
'small'/'default'/'large'	'default'	Adding bootstrap classes: form-control-sm,input-sm,form-control-lg input-lg,btn-sm,btn-lg
(search: string,item: INgxSelectOption) => boolean	null	The callback function for custom filtering the select list

Output(focus)(blur)(open)(close)(select)(remove)(navigated)(selectionChanges)

(typed)	Fired on changing search input. Returns`string`with that value.
Fired on select focus
Fired on select blur
Fired on select dropdown open
Fired on select dropdown close
Fired on an item selected by user. Returns value of the selected item.
Fired on an item removed by user. Returns value of the removed item.
Fired on navigate by the dropdown list. Returns:`INgxOptionNavigated`.
Fired on change selected options. Returns:`INgxSelectOption[]`.

Warning!Although the component contains theselectand theremoveevents,the better solution is usingvalueChangesof theFormControl.

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

@Component({
    selector: 'app-example',template: `<ngx-select [items]="['111','222']" [formControl]="selectControl"></ngx-select>`
})
class ExampleComponent {
    public selectControl = new FormControl();

    constructor() {
        this.selectControl.valueChanges.subscribe(value => console.log(value));
    }
}

Styles and customization

Currently,the component contains CSS classes named withinBEM Methodology. As well it contains the "Bootstrap classes". Recommended use BEM classes for style customization.

List of styles for customization:

ngx-select- Main class of the component.
ngx-select_multiple- Modifier of the multiple mode. It's available when the property multiple is true.
ngx-select__disabled- Layer for the disabled mode.
ngx-select__selected- The common container for displaying selected items.
ngx-select__toggle- The toggle for single mode. It's available when the property multiple is false.
ngx-select__placeholder- The placeholder item. It's available when the property multiple is false.
ngx-select__selected-single- The selected item with single mode. It's available when the property multiple is false.
ngx-select__selected-plural- The multiple selected item. It's available when the property multiple is true.
ngx-select__allow-clear- The indicator that the selected single item can be removed. It's available while properties the multiple is false and the allowClear is true.
ngx-select__toggle-buttons- The container of buttons such as the clear and the toggle.
ngx-select__toggle-caret- The drop-down button of the single mode. It's available when the property multiple is false.
ngx-select__clear- The button clear.
ngx-select__clear-icon- The cross icon.
ngx-select__search- The input field for full text lives searching.
ngx-select__choices- The common container of items.
ngx-select__item-group- The group of items.
ngx-select__item- An item.
ngx-select__item_disabled- Modifier of a disabled item.
ngx-select__item_active- Modifier of the activated item.

Templates

For extended rendering customisation you are can use theng-template:

<ngx-select [items]="items" optionValueField="hex" optionTextField="name" [(ngModel)]="ngxValue">

    <ng-template ngx-select-option-selected let-option let-text="text">
        <span class="color-Box" [style]="style('background-color:' + option.value)"></span>
        <span [innerHtml]="text"></span>
        ({{option.data.hex}})
    </ng-template>

    <ng-template ngx-select-option let-option let-text="text">
        <span class="color-Box" [style]="style('background-color:' + option.value)"></span>
        <span [innerHtml]="text"></span>
        ({{option.data.hex}})
    </ng-template>

    <ng-template ngx-select-option-not-found>
        nothing found
    </ng-template>

</ngx-select>

Also,you are can mix directives for reducing template:

<ngx-select [items]="items" optionValueField="hex" optionTextField="name" [(ngModel)]="ngxValue">
    <ng-template ngx-select-option-selected ngx-select-option let-option let-text="text">
        <span class="color-Box" [style]="style('background-color:' + option.value)"></span>
        <span [innerHtml]="text"></span>
        ({{option.data.hex}})
    </ng-template>

    <ng-template ngx-select-option-not-found>
        Not found <button (click)="addItem()">(+) Add new item</button>
    </ng-template>
</ngx-select>

Description details of the directives:

ngx-select-option-selected- Customization rendering selected options. Representing variables:
- option(implicit) - object of typeINgxSelectOption.
- text- The text defined by the propertyoptionTextField.
- index- Number value of index the option in the select list. Always equal to zero for the single select.
ngx-select-option- Customization rendering options in the dropdown menu. Representing variables:
- text- The highlighted text defined by the propertyoptionTextField. It is highlighted in the search.
- index- Number value of index for the top level.
- subIndex- Number value of index for the second level.
ngx-select-option-not-found- Customization "not found text". Does not represent any variables.

地址：点击打开链接