简体   繁体   中英

Custom Value of Checkbox 'Y'/'N' instead of true/false. Angular 2

I have a data which I want to display in a checkbox.The data has a boolean condition 'Y'/'N'. My problem is checkbox input only accepts true/false. Is there a way to change the value of checkbox that instead of true/false I want it to accepts 'Y'/'N';

Sample Data:

[{
    "id": 1,
    "value": "0.59"
}, {
    "id": 2,
    "value": "N"
}, {
    "id": 3,
    "value": "LOW"
}, {
    "id": 4,
    "value": "HIGH"
}, {
    "id": 5,
    "value": "Y"
}]

You could do this more efficiently, however this is the most clear way to describe the solution to the problem, and it's easy to read / implement / expand on. I've included a link to a plnkr at the bottom which writes the values out to the document so you can see this in action. I've removed the document.write output in the code here:

When you're fetching in your data:

const data = [{
    "id": 1,
    "value": "0.59"
}, {
    "id": 2,
    "value": "N"
}, {
    "id": 3,
    "value": "LOW"
}, {
    "id": 4,
    "value": "HIGH"
}, {
    "id": 5,
    "value": "Y"
}]

Iterate through the objects in the array, if they are Y or N values, then add a booleanValue key with the appropriate true/false value and bind to that with your checkboxes.

for (var i=0; i<data.length; i++) {
  if (data[i].value == "Y") {
    data[i].boolValue = true
  } else if (data[i].value == "N") {
    data[i].boolValue = false
  } 
}

When you're saving your data (Y / N values removed for visibility, they would still be in your data):

const submitData = [{
    "id": 1,
    "value": "0.59"
}, {
    "id": 2,
    "boolValue": true
}, {
    "id": 3,
    "value": "LOW"
}, {
    "id": 4,
    "value": "HIGH"
}, {
    "id": 5,
    "boolValue": false
}]

Iterate through the objects in the array, if they are true or false values, then set the value key to the appropriate Y / N value.

for (var i=0; i<submitData.length; i++) {
  if (submitData[i].boolValue == true) {
    submitData[i].value = "Y"
  } else if (submitData[i].boolValue == false) {
    submitData[i].value = "N"
  } 
}

https://plnkr.co/edit/DrAvyMV5BqADhLdTTn6M?p=preview

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM