從組件中選取所有選中的項目 - 多選複選框

我有多選複選框列表如下所示。你能告訴我如何從組件（.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'將被檢查 –

從組件中選取所有選中的項目 - 多選複選框

回答

相關問題