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

我有多选复选框列表如下所示。你能告诉我如何从组件（.ts）中挑选所有选中的项目吗？从组件中选取所有选中的项目 - 多选复选框

的.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

this.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": false 
     }, 
     { 
      "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": false 
     }, 

]

来源

2017-05-04 Sampath

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

来源

2017-05-04 09:47:18 Pengyy

Nope.I需要获得'checked' “多选复选框”列表的值。它是一个动态列表，用户可以更改这些值。 – Sampath

@Sampath你试过这个解决方案吗？我认为这应该只是改变你的'ngModel'到'i.checked'。如果用户更改了任何“复选框”，那么该输入的“checked”值应该更新，并且Array.filter会给出您期望的结果。 – Math10

@Sampath如果你将'i.encode'绑定到'ngModel'，当用户改变复选框的状态时，'encode'的值将被更改为0或1，这是你的预期吗？ – Pengyy

如果你有一个模型项目状态检查变量，那么你可以添加绑定到属性

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

    }

来源

2017-05-04 09:52:50

你也可以显示'.ts'代码吗？我怎样才能从组件（'.ts'）中挑选'checked'项目？ – Sampath

而我们不能使用这个'[value] =“i.encode”'。它不是'离子复选框'属性。 – Sampath

你选择所有和那些'checked = true'将被检查 –

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

回答

相关问题