角度多选的自定义触发器

时间:2019-01-12 23:55:52

标签: angular dropdown multi-select angular-bootstrap

是否有一个带有自定义触发按钮的2+多角度下拉菜单?

我正在寻找类似于旧AngularJS“使用包含的自定义触发元素”(here)的方法,但是ng-select,ng-multiselect-dropdown和其他似乎不提供此功能

我正在寻找带有示例代码的可行选项。

enter image description here

1 个答案:

答案 0 :(得分:1)

补充我的评论,该组件变为

.html

<div ngbDropdown class="d-inline-block" autoClose="outside">
    <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
        {{data.length?data.length+' checked':'Select'}}
  </button>
  <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button class="dropdown-item" *ngFor="let option of options" (click)="check(option)">
          <span *ngIf="option.checked">~ </span>{{option.label}}
        </button>
  </div>
</div>

.ts

import {Component,Input,Output,EventEmitter} from '@angular/core';

@Component({
  selector: 'ngbd-dropdown-basic',
  templateUrl: './dropdown-basic.html'
})
export class NgbdDropdownBasic {
  @Input() options;
  @Output() change = new EventEmitter<any[]>();
  data:any[]=[];
  check(option)
  {
    option.checked=!option.checked;
    this.data=this.options.filter((x:any)=>x.checked).map(x=>
      {
        return {id:x.id,label:x.label}
      })
    this.change.emit(this.data);
  }
}

stackblitz

您可以轻松地在自定义表单控件中进行转换