带索引的多 select 复选框

Question

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

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

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

注：其实我需要select的indexed item.Hope有办法修改getMultiSelectedItems() 得到那个。换句话说，用户 select 编辑了 array 的 index。

.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

希望我得到了你的意见。您可以使用 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)));

Answer 2

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

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

带索引的多 select 复选框

Multi select check box with index

javascript

ionic-framework

ionic2

ionic3

angular