带索引的多选复选框

Question

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

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

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

注意：实际上，我需要所选项目的index。希望有办法修改getMultiSelectedItems() 来获得它。换句话说，index 属于用户选择的array。

.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;}
        });

Answer 2

希望我能得到你的意见。您可以使用Array.map 生成一个新的array，其中Array.filter 的结果包含原始数据及其来自原始数组的索引。

function getMultiSelectedItems() {
  var arr = [];
  return this.inputs.filter(opt => opt.checked)
                    .map(item => {return {"index": inputs.indexOf(item), "data": item};});
}

var 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": true
  },
  {
    "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": true
  },
];

console.log(getMultiSelectedItems());

或者你可以简单地使用Array.indexOf 和Array.filter 的结果，但请记住，如果对象的实例（Array.filter 的元素）发生更改，这将不起作用。

function getMultiSelectedItems() {
  return this.inputs.filter(opt => opt.checked);
}

var 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": true
  },
  {
    "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": true
  },
];

getMultiSelectedItems().forEach(item => console.log(inputs.indexOf(item)));