Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ozonix/ox-select
https://github.com/ozonix/ox-select
angular angular-cli angular2 angular4 angular5 filter multiselect reactive-forms
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ozonix/ox-select
- Owner: Ozonix
- License: mit
- Created: 2017-12-29T11:02:02.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-01-01T19:44:19.000Z (about 7 years ago)
- Last Synced: 2024-11-14T14:08:43.064Z (about 2 months ago)
- Topics: angular, angular-cli, angular2, angular4, angular5, filter, multiselect, reactive-forms
- Language: TypeScript
- Size: 296 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ox-select. Smart select for Angular 4+
> Custom multiselect with filter for ReactiveForms and simple using
>
> Кастомный мультиселект с фильтром для реактивных форм и обычного использования
## Install/Установка
```
npm install ox-select
```
**For icons install font-awesome or ionic icons pack**
**Для работы иконок установите font-awesome или ionic пакеты**
```
npm install font-awesome --save
...//angular-cli.json
"apps": [
{
"root": "src",
"outDir": "dist",
....
"styles": [
"styles.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
...
}
]
],
...
```
## Using/Использование
import module where will you use select:
Добавьте модуль в ваш проект, там где будете использовать select:
```
import { OxSelectModule } from 'ox-select';
...
@NgModule({
imports: [
...
OxSelectModule
],
...
```
> If you have error:
> Если имеется ошибка:
> > Module not found: Error...
> add link to index.ts file of OxSelectModule
> Добавьте ссылку до index.ts файла модуля OxSelectModule
```//tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
},
"include": [
"src/**/*",
"node_modules/ox-select/index.ts"
]
}
```
Add tag with any attributs your need into html-template (all attributes not required)
Добавьте тэг с любыми требуемыми для Вас аттрибутами (все атрибуты необязательные)
```
or/или
```
-alter attr-
**filterSelect** - add filter for searching / Добавляет поле с поиском
**filterTitle** - text of filter / текст фильтра
**multySelect** - switch on multiselect mode / Включает режим с множественным выбором
**defaultData** - text when haven't options / Текст когда нет опций
**headerTitle** - text when have no selected options yet / Текст когда еще ничего не выбрано из списка опций
**headerIcon** - icon before headerTitle / иконка перед headerTitle
**styleSelect** - use like ngStyle for box of select / работает как ngStyle для вьюхи select
-main attr-
**inputData** - input data :) / Входящие данные
**outputData** - output data / Выходящие данные
Input data must be array of object by next style:
Входящие данные должны быть массивом объектов следующего вида:
```
this.method.selectUsers().subscribe(
res => {
this.items = res.map((select: any)=>{
return {
input: select.name,
output: select.id,
icon: 'fa fa-user-o',
disabled: select._id == '5a46d2e0b0578201407595bb',
selected: select._id == '5a46d2e0b0578201407595bd',
alter: [
{
key: 'id',
value: select.id
}
]
}
});
},
error => {
console.log(error);
}
);
```
where / где:
-required/обязательные-
**input** - like `Input `/ как `Input`
**output** - like value in `` / как value в ``
-additional/дополнительные-
**icon** - icon before input's text / иконка перед текстом input
**disabled** - like `` / как ``
**selected** - like `` / как ``
**alter** - one of more descriptions / одно или более описаний:
```
...
alter: [
{
key: 'id',
value: user.id
},
{
key: 'created',
value: user.created
},
{
key: 'age',
value: user.age
}
]
...
```
Output data listen event of select and call shown method where $event is array
Выходные данные прослушиваются в outputData и вызывают указанный метод где $event - это массив
example/ к примеру:
```
private form: FormGroup = this.fb.group({
'check-item': '',
'select-items': ''
});
private select(data, name) {
this.form.get(name).setValue(data);
}
```