带索引的多选复选框

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