javascript - 带索引的多选复选框

Question

我有一个多选复选框，如下所示。在此方法中，getMultiSelectedItems() 检索所选项目，如下所示。假设我选择了一项。

checked:true,
display: "Co-sleep with parent(s)",
encode : "1",
label :  "uiCoSleepNight"

你能告诉我如何包含在上述对象上选择的项目的索引吗？我们可以将 index 视为 inputs 数组的顺序。

注意:实际上，我需要所选项目的index。希望有一种方法可以修改getMultiSelectedItems()来获得它。换句话说，用户选择的数组的索引。

.html

<ion-list>
        <ion-item *ngFor="let i of inputs">
          <ion-label>{{i.display}}</ion-label>
          <ion-checkbox name="{{i.label}}" [(ngModel)]="i.checked"></ion-checkbox>
        </ion-item>
      </ion-list>

.ts

 //get Multi Selected Items
  getMultiSelectedItems(): any {
    return this.inputs.filter(opt => opt.checked);
  }

    this.inputs= [
        {
            "encode": "1",
            "display": "Own bed/crib in own room",
            "label": "uiOwnRoomOwnBedNight",
            "checked": false
        },
        {
            "encode": "1",
            "display": "Own bed/crib but share room with sibling(s)",
            "label": "uiSharedRoomOwnBedNight",
            "checked": false
        },
        {
            "encode": "1",
            "display": "Own bed/crib but share room with parent(s)",
            "label": "uiParentRoomOwnBedNight",
            "checked": false
        },
        {
            "encode": "1",
            "display": "Co-sleep with parent(s)",
            "label": "uiCoSleepNight",
            "checked": false
        },
    ],

Answer 1

过滤器中可以获得的第二个值是索引。

return this.inputs.filter((opt, i) => {
    if(opt.checked) {opt.index = i; return true;}
        });