Question

我们正在将现有的angular1项目移动到angular2，并希望替换现有的ui-select组件。

我用Google搜索，但找不到angular2的ui-select版本。

有没有人找到更好的选择？

Answer 1

PrimeNG的下拉或多选可能会有所帮助。

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

或

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

Answer 2

ng2-select会做一些。但它还不支持动态数据绑定。

实际上，几乎没有为angular2实现任何针对angular实现的第三方插件。

Answer 3

如果有人正在迁移到ng2并且需要运行混合应用程序（同时运行ng1和ng2 - 现在分别称为AngularJS和Angular），则可以包装非使用ng1组件创建的UI1 UI小部件（如ui-select ）用于ng2组件模板。我们使用ui-select成功完成了这项工作，效果很好。特别是，请查看@Directive注释绑定。

＆＃13;

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);
  }
}

＆＃13;

Answer 4

请检查ng-select。它具有单选，多选，搜索自动完成，标签，分组以及所有上述虚拟滚动的功能。我希望这会有所帮助。

Answer 5

对于专为Angular 2开发的组件，请参阅Angular 2的Kendo UI的DropDowns package。它仍处于测试阶段，欢迎提供反馈。

Answer 6

你看到了吗？ ngx-select-ex的ng2-select分叉。 ngx-select-ex具有单选，多选，选择，模糊事件，如select2。请看一下 ngx-select-ex

的演示

在Angular2中使用ui-select替换

6 个答案: