Angular multiselect - angularjs

Question

Is there any angular multiselect controller that lets you insert options on the go?
I need to start from a list, let's say:
Option A
Option B
Option C
But the user might insert new items like:
Option D
Option E
And delete some others, like:
Option A
Option C
So the final list will be:
Option B
Option D
Option E
Perhap I am confusing the name and it is not multiselect, it is just a dropdown list.

Answer 1

In my current project I am using Select2 and its angular-ui counterpart with success. Maybe this is an option for you.
It works well with ng-model objects.

Answer 2

You are right this is not a multi-select if you're just adding and deleting items.
Just bind an array to an ng-repeat and modify the array using functions in your controller.

Answer 3

<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" (click)="toggleSelect()">
<span class="pull-left" [innerHtml]="header"></span>
<span class="caret pull-right"></span>
</button>
<ul class="dropdown-menu multi-select-popup" [ngStyle]="{display:isOpen ? 'block' : 'none'}" style="display:block;">
<li *ngIf="enableFilter" class="filter-container">
<div class="form-group has-feedback filter">
<input class="form-control" type="text" [value]="filterText" [placeholder]="filterPlaceholder" [formControl]="filterInput" />
<span class="clear-filter fa fa-times-circle-o form-control-feedback" (click)="clearFilter()"></span>
</div>
</li>
<li *ngFor="let item of _items | filter:{label:filterText}">
<a (click)="select(item)" class="dropdown-item">
<i class="fa fa-fw" [ngClass]="{'fa-check': item.checked, 'glyphicon-none': !item.checked}"></i>
<span [innerHtml]="item.label"></span>
</a>
</li>
</ul>
</div>
component
import {Component,Input,Output,OnInit,ViewChild,EventEmitter,ChangeDetectionStrategy, ChangeDetectorRef} from '#angular/core';
import {Pipe, PipeTransform} from '#angular/core';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/throttleTime';
import 'rxjs/add/observable/fromEvent';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { FormGroup, FormControl } from '#angular/forms';
import { ControlValueAccessor } from '#angular/forms';
#Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any, filter: any): any {
if (filter && Array.isArray(items)) {
let filterKeys = Object.keys(filter);
return items.filter(item =>
filterKeys.reduce((memo, keyName) =>
(memo && new RegExp(filter[keyName], 'gi').test(item[keyName])) || filter[keyName] === "", true));
} else {
return items;
}
}
}
#Component({
selector: 'multiselect',
templateUrl: 'templates/multiselect.html'
})
export class Multiselect implements OnInit {
public _items: Array<any>;
public _selectedItems: Array<any>;
public isOpen: bool = false;
public enableFilter: bool;
public header: string = "Select some stuff";
public filterText: string;
public filterPlaceholder: string;
public filterInput = new FormControl();
private _subscription: Subscription;
#Input() items: Observable<any[]>;
// ControlValueAccessor Intercace and mutator
propagateChange = (_: any) => {};
get selectedItems(): any {
return this._selectedItems;
};
writeValue(value: any) {
if (value !== undefined) {
this._selectedItems = value;
} else {
this._selectedItems = [];
}
}
registerOnChange(fn: any) {
this.propagateChange = fn;
}
registerOnTouched(fn: any) : void
constructor(private changeDetectorRef: ChangeDetectorRef) {
}
select(item: any) {
item.checked = !item.checked;
}
toggleSelect() {
this.isOpen = !this.isOpen;
}
clearFilter() {
this.filterText = "";
}
ngOnInit() {
this._subscription = this.items.subscribe(res => this._items = res);
this.enableFilter = true;
this.filterText = "";
this.filterPlaceholder = "Filter..";
this.filterInput
.valueChanges
.debounceTime(200)
.distinctUntilChanged()
.subscribe(term => {
this.filterText = term;
this.changeDetectorRef.markForCheck();
console.log(term);
});
}
}

Answer 4

Angular JS Multi Select would be a good choice. I used it in my project: http://isteven.github.io/angular-multi-select/#/demo-dynamic-update

Answer 5

I really like angular material way of multiselecting items - check this out
https://material.angularjs.org/latest/demo/select
scroll to Option Groups section - there is also code snippet for doing this kind of thing, have fun!