ng-multiselect-dropdown select 连续范围内的选项

Question

我在 Angular 8.3 网络 SPA 中使用 ng-multiselect-dropdown。我有一个下拉菜单，它具有 select 多个选项的功能，如下所示：

我需要帮助select在连续范围内设置选项。例如，如图所示，Q2 和 Q4 被 select 编辑。我想实现一个功能，如果用户 selects Q2 和 Q4，Q3 得到自动 selected。类似地，如果用户先 selects Q3 然后 selects Q1，Q2 会自动 selected。总之，在连续范围内超过 1 个季度的 selection 将需要 selected。但是，如果只有四分之一（比如 Q4）被 selected，其他的则不需要 selected。

component.html

      <!-- Select quarter -->
      <div class="dropdown ml-2"
      >
        <ng-multiselect-dropdown
          [placeholder]="'Select quarter(s)'"
          [settings]="dropdownSettings"
          [data]="quarterList"
          [(ngModel)]="selectedQuarterList"
          (onDropDownClose)="onDropdownClose()"
          (click)="this.isDropdownOpen = true"
        >
        </ng-multiselect-dropdown>
      </div>

component.ts

  ngOnInit() {
    this.dropdownSettings = {
      singleSelection: false,
      idField: "quarterId",
      textField: "title",
      selectAllText: "Select All",
      unSelectAllText: "Clear selection",
      itemsShowLimit: 4,
      allowSearchFilter: false,
    };
}

感谢任何帮助，谢谢。

Answer 1

ng-dropdown-select 将数组存储在变量 selectedQuarterList 中。第一个是排序这个数组，在我们得到这个数组的第一个和最后一个元素（实际上是索引）和 select 这个

之间的所有值之后

因此，首先我们添加事件 (onSelect) 和 (onDeSelect)。我选择传递一个新参数的相同函数，该参数为 true -if select- 或 false -if unselect-

  <ng-multiselect-dropdown
    ...
      (onSelect)="onItemSelect($event,true)"
      (onDeSelect)="onItemSelect($event,false)"
    >
    </ng-multiselect-dropdown>

onItemSelect函数变成这样

  onItemSelect(event: any, checked: boolean) {
    
    if (this.selectedQuarterList.length > 1) { //almost two elements selected

      //we order the elements acording the list
      const value=this.quarterList.filter(x=>this.selectedQuarterList.indexOf(x)>=0)

      //get the index of the first and the last element
      let first = this.quarterList.findIndex((x) => x == value[0]);
      let last = this.quarterList.findIndex(
        (x) => x == value[value.length - 1]
      );

      //and give the value between this indexs
      this.selectedQuarterList = this.quarterList.filter(
        (_, index) => index >= first && (last < 0 || index <= last)
      );
    }
  }

但是，仅使用这段代码，我们无法取消选中中间的选项 - 假设您已经 selected ["Q1","Q2","Q3"] 不可能取消选中“Q2”（首先获取值 0，最后值 2 又是 selected "Q2"

考虑到这一点，我们需要找到未编辑的元素的索引select，并首先和最后更改变量，这样函数就变成了

  onItemSelect(event: any, checked: boolean) {
    if (this.selectedQuarterList.length > 1) {
      const value=this.quarterList.filter(x=>this.selectedQuarterList.indexOf(x)>=0)
      let first = this.quarterList.findIndex((x) => x == value[0]);
      let last = this.quarterList.findIndex(
        (x) => x == value[value.length - 1]
      );

      //we add this condition
      if (last - first + 1 > value.length && !checked) {
        const index = this.quarterList.findIndex((x) => x == event);
        if (index < this.quarterList.length / 2) {
          first = index + 1;
        } else
          last =index-1;
      }

      this.selectedQuarterList = this.quarterList.filter(
        (_, index) => index >= first && (last < 0 || index <= last)
      );
    }
  }

你可以在this stackblitz

中看到

ng-multiselect-dropdown select 连续范围内的选项

ng-multiselect-dropdown select options in a continuous range

multi-select

npm

drop-down-menu

angular

ng-multiselect-dropdown