ng-multiselect-dropdown 在连续范围内选择选项

Question

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

我需要帮助来选择连续范围内的选项。例如，如图所示，Q2 和 Q4 被选中。我想实现一个功能，如果用户选择Q2 和Q4，Q3 会自动选择。同样，如果用户先选择Q3，然后选择Q1，则Q2 会自动选择。总之，在连续范围内选择超过 1 个季度时，将需要选择。但是，如果只选择了四分之一（比如Q4），则不需要选择其他的。

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 中存储一个数组。首先是排序这个数组，在我们得到这个数组的第一个和最后一个元素（实际上是索引）并选择这个之间的所有值之后

所以，首先我们添加事件(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)
      );
    }
  }

但是，仅使用此代码，我们无法取消选中中间的选项 - 假设您选择了 ["Q1","Q2","Q3"] 不可能取消选中“Q2”（首先获取值 0，最后获取值 2，然后再次选择“Q2”

考虑到这一点，我们需要找到未选择元素的索引，并首先和最后更改变量，以便函数变得像

  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看到