从组件中选取所有选中的项目 - 多选复选框

问题描述 投票:0回答:2
angular typescript ionic-framework ionic2 ionic3
2个回答
2
投票

OP 的反馈: 下面的一个对我有用。

this.inputs.filter(opt => opt.checked).map(opt => opt.label);

原答案:

我认为你应该将

i.checked
而不是
i. encode
绑定到
ion-checkbox
。然后就可以使用
Array.filter
来获取选中的项目。

var inputs = [{
    "encode": "1",
    "display": "en falls asleep without a caregiver in the room",
    "label": "uiFallsAsleepUnassistedBedTime",
    "checked": false
  },
  {
    "encode": "2",
    "display": "During breastfeeding",
    "label": "uiBreastFeedBedTime",
    "checked": true
  },
  {
    "encode": "3",
    "display": "Being rocked or held (in arms or baby sling/carrier)",
    "label": "uiSlingBedTime",
    "checked": false
  },
  {
    "encode": "4",
    "display": "In motion (stroller, car, etc.)",
    "label": "uiInMotionBedTime",
    "checked": true
  },
]

console.log(inputs.filter(function(item){ return item.checked === true; }));

0
投票

如果您有模型项状态检查变量,那么您可以添加到属性的绑定

<ion-checkbox name="{{i.label}}" [(ngModel)]="i.encode" [checked]="i.checked" (change)="change(i, $event)"></ion-checkbox>

.ts代码:

  checked = [];

  change(item, event) {
    var index = this.inputs.map(i => i.encode).indexOf(item.encode);
    if(event.target.checked) {
      if(index === -1) {
        this.checked.push(item);
      }
    } else {
      if(index !== -1) {
        this.checked.splice(index, 1);
      }
    }

  }
© www.soinside.com 2019 - 2024. All rights reserved.