Question

是否有任何角度多选控制器可让您随时随地插入选项？我需要从列表开始，让我们说：

选项A
选项B
选项C

但是用户可能会插入新项目，如：

选项D
选项E

删除其他一些内容，例如：

选项A
选项C

所以最终的名单将是：

选项B
选项D
选项E

Perhap我对这个名字感到困惑，它不是多选，只是一个下拉列表。

Answer 1

在我目前的项目中，我使用Select2及其angular-ui counterpart成功。也许这是你的选择。它适用于ng-model个对象。

Answer 2

如果您只是添加和删除项目，那么这不是多项选择。

只需将数组绑定到ng-repeat并使用控制器中的函数修改数组。

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>

成分</ P>

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将是一个不错的选择。我在我的项目中使用它：http://isteven.github.io/angular-multi-select/#/demo-dynamic-update

Answer 5

我非常喜欢多种物品的角度物质方式 - 检查一下 https://material.angularjs.org/latest/demo/select 滚动到选项组部分 - 还有用于执行此类操作的代码段，玩得开心！

角度多重选择

5 个答案: