ui-select replacement in Angular2

Question

Stiamo spostando il nostro progetto angular1 esistente su angular2 e vogliamo sostituire il componente esistente ui-select.

Ho cercato su Google, ma non ho trovato la versione ui-select per angular2.

Qualcuno ha trovato un'alternativa migliore?

Answer 1

ng2-select ne farebbe parte. Ma non supporta ancora l'associazione dinamica dei dati.

In realtà, quasi nessuno dei plugin di terze parti implementati per angolare non è implementato per angular2.

Answer 2

Il dropdown o il multiselect di PrimeNG può essere d'aiuto.

http://www.primefaces.org/primeng/#/dropdown

o

http://www.primefaces.org/primeng/#/multiselect

Answer 3

Per i componenti sviluppati appositamente per angolare 2, vedere la DropDowns package di Kendo UI per angolare 2. E 'ancora in fase beta, e il feedback è benvenuto.

Answer 4

Se qualcuno sta eseguendo la migrazione a ng2 e deve eseguire un'applicazione ibrida (eseguendo sia ng1 che ng2 - ora denominati AngularJS e Angular rispettivamente) è possibile avvolgere widget UI ng1 che non sono stati creati utilizzando componenti ng1 (come ui- selezionare) per l'uso all'interno dei modelli di componenti ng2. Lo abbiamo fatto con successo con ui-select e funziona alla grande. In particolare, guarda il binding di annotazione @Directive.

import {Directive, ElementRef, Injector, Input} from '@angular/core'; 
 
import {UpgradeComponent} from '@angular/upgrade/static'; 
 
import {module, IComponentOptions} from 'angular'; 
 

 
class UiSelectComponent implements IComponentOptions { 
 

 
    public bindings: any = { 
 
    items: '<', 
 
    model: '<', 
 
    modelProperty: '@', 
 
    placeholder: '@', 
 
    renderProperty: '@', 
 
    selectProperty: '@' 
 
    }; 
 
    public template = ` 
 
    <ui-select ng-model="$ctrl.model[$ctrl.modelProperty]" class="form-control input-sm" required> 
 
     <ui-select-match placeholder="{{$ctrl.placeholder}}">{{$select.selected[$ctrl.renderProperty]}}</ui-select-match> 
 
     <ui-select-choices repeat="item[$ctrl.selectProperty] as item in $ctrl.items | filter: $select.search"> 
 
     {{item[$ctrl.renderProperty]}} 
 
     </ui-select-choices> 
 
    </ui-select> 
 
    `; 
 
} 
 

 
const selector = 'uiSelectWrapper'; 
 
export const UI_SELECT_COMPONENT = 'spinnaker.core.widget.uiSelect.component'; 
 
module(UI_SELECT_COMPONENT, []).component(selector, new UiSelectComponent()); 
 

 
@Directive({ 
 
    selector: 'ui-select-wrapper' 
 
}) 
 
export class UiSelectComponentDirective extends UpgradeComponent { 
 

 
    @Input() 
 
    public items: any[]; 
 

 
    @Input() 
 
    public model: any; 
 

 
    @Input() 
 
    public modelProperty: string; 
 

 
    @Input() 
 
    public placeholder: string; 
 

 
    @Input() 
 
    public renderProperty: string; 
 

 
    @Input() 
 
    public selectProperty: string; 
 

 
    constructor(elementRef: ElementRef, injector: Injector) { 
 
    super(selector, elementRef, injector); 
 
    } 
 
}

Answer 5

Hai visto ngx-select-ex fork di ng2-select. ngx-select-ex ha un singolo evento di selezione, multiselect, slitter, sfocatura come select2.