使用 ngModel 获取动态复选框的值
Getting the values of dynamic checkboxes with ngModel
我有这种结构的数据库
"questionnaire": {
"id": "5ac5f074867d190bc471dc59",
"name": "Diabetes Questionnaire Test"
"item": [
{
"prefix": "1",
"text": "Do you have family history of diabetes?",
"Questiontype": "choice",
"options": [
{
"value": "Yes",
"checked": false
},
{
"value": "No",
"checked": false
},
{
"value": "I Don't know",
"checked": false
}
]
},
{
"prefix": "2",
"text": "Are you hypertensive?",
"Questiontype": "choice",
"options": [
{
"value": "Yes",
"checked": false
},
{
"value": "No",
"checked": false
},
{
"value": "I Don't Know",
"checked": false
}
]
},
在我的 html 代码中,我以这种方式在复选框中显示选项。我正在尝试获取已在数组或对象中选中的选项的值。请问我该怎么做?
<ion-item *ngFor="let option of item.options;">
<ion-label>{{option.value}}</ion-label><ion-checkbox [(ngModel)]="option.checked" name="option.checked"></ion-checkbox>
</ion-item>
请问如何获取勾选选项的值?
//Sample database structure
datas =
{ "questionnaire": { "id": "5ac5f074867d190bc471dc59", "name": "Diabetes Questionnaire Test", "item": [ { "prefix": "1", "text": "Do you have family history of diabetes?", "Questiontype": "choice", "options": [ { "value": "Yes", "checked": true }, { "value": "No", "checked": false }, { "value": "I Don't know", "checked": false } ] }, { "prefix": "2", "text": "Are you hypertensive?", "Questiontype": "choice", "options": [ { "value": "Yes", "checked": false }, { "value": "No", "checked": false }, { "value": "I Don't Know", "checked": false } ] } ] } };
Set the checked input property to the value like this using your datas
<div *ngFor="let data of datas.questionnaire.item;">
<p>
<input type="checkbox" [checked]="data.options[0].checked">
</p>
</div>
通过ion-checkbox中的ionChange函数可以创建一个新的答案数组
Html
<ion-list *ngFor="let item of data.questionnaire.item;let i = index">
<ion-item *ngFor="let option of item.options;let j =index">
<ion-label>{{option.value}}</ion-label>
<ion-checkbox [(ngModel)]="option.checked" (ionChange)="updateAnswer(i,j,option.value,option.checked)"></ion-checkbox>
</ion-item>
</ion-list>
{{answer | json}}
TypeScript
data: any;
answer:any[] = [];
constructor(public navCtrl: NavController) {
this.data = {"questionnaire": {
"id": "5ac5f074867d190bc471dc59",
"name": "Diabetes Questionnaire Test",
"item": [
{
"prefix": "1",
"text": "Do you have family history of diabetes?",
"Questiontype": "choice",
"options": [
{
"value": "Yes",
"checked": false
},
{
"value": "No",
"checked": false
},
{
"value": "I Don't know",
"checked": false
}
]
},
{
"prefix": "2",
"text": "Are you hypertensive?",
"Questiontype": "choice",
"options": [
{
"value": "Yes",
"checked": false
},
{
"value": "No",
"checked": false
},
{
"value": "I Don't Know",
"checked": false
}
]
}
]
}
};
}
updateAnswer(index,ansindex,value,checked){
if(!Array.isArray(this.answer[index])){
this.answer[index] = []
}
if(checked){
this.answer[index][ansindex] = value
}else{
this.answer[index].splice(ansindex,1)
}
}
演示
勾选 link https://stackblitz.com/edit/ionic-jsxle7?file=pages%2Fhome%2Fhome.ts
我有这种结构的数据库
"questionnaire": {
"id": "5ac5f074867d190bc471dc59",
"name": "Diabetes Questionnaire Test"
"item": [
{
"prefix": "1",
"text": "Do you have family history of diabetes?",
"Questiontype": "choice",
"options": [
{
"value": "Yes",
"checked": false
},
{
"value": "No",
"checked": false
},
{
"value": "I Don't know",
"checked": false
}
]
},
{
"prefix": "2",
"text": "Are you hypertensive?",
"Questiontype": "choice",
"options": [
{
"value": "Yes",
"checked": false
},
{
"value": "No",
"checked": false
},
{
"value": "I Don't Know",
"checked": false
}
]
},
在我的 html 代码中,我以这种方式在复选框中显示选项。我正在尝试获取已在数组或对象中选中的选项的值。请问我该怎么做?
<ion-item *ngFor="let option of item.options;">
<ion-label>{{option.value}}</ion-label><ion-checkbox [(ngModel)]="option.checked" name="option.checked"></ion-checkbox>
</ion-item>
请问如何获取勾选选项的值?
//Sample database structure
datas =
{ "questionnaire": { "id": "5ac5f074867d190bc471dc59", "name": "Diabetes Questionnaire Test", "item": [ { "prefix": "1", "text": "Do you have family history of diabetes?", "Questiontype": "choice", "options": [ { "value": "Yes", "checked": true }, { "value": "No", "checked": false }, { "value": "I Don't know", "checked": false } ] }, { "prefix": "2", "text": "Are you hypertensive?", "Questiontype": "choice", "options": [ { "value": "Yes", "checked": false }, { "value": "No", "checked": false }, { "value": "I Don't Know", "checked": false } ] } ] } };
Set the checked input property to the value like this using your datas
<div *ngFor="let data of datas.questionnaire.item;">
<p>
<input type="checkbox" [checked]="data.options[0].checked">
</p>
</div>
通过ion-checkbox中的ionChange函数可以创建一个新的答案数组
Html
<ion-list *ngFor="let item of data.questionnaire.item;let i = index">
<ion-item *ngFor="let option of item.options;let j =index">
<ion-label>{{option.value}}</ion-label>
<ion-checkbox [(ngModel)]="option.checked" (ionChange)="updateAnswer(i,j,option.value,option.checked)"></ion-checkbox>
</ion-item>
</ion-list>
{{answer | json}}
TypeScript
data: any;
answer:any[] = [];
constructor(public navCtrl: NavController) {
this.data = {"questionnaire": {
"id": "5ac5f074867d190bc471dc59",
"name": "Diabetes Questionnaire Test",
"item": [
{
"prefix": "1",
"text": "Do you have family history of diabetes?",
"Questiontype": "choice",
"options": [
{
"value": "Yes",
"checked": false
},
{
"value": "No",
"checked": false
},
{
"value": "I Don't know",
"checked": false
}
]
},
{
"prefix": "2",
"text": "Are you hypertensive?",
"Questiontype": "choice",
"options": [
{
"value": "Yes",
"checked": false
},
{
"value": "No",
"checked": false
},
{
"value": "I Don't Know",
"checked": false
}
]
}
]
}
};
}
updateAnswer(index,ansindex,value,checked){
if(!Array.isArray(this.answer[index])){
this.answer[index] = []
}
if(checked){
this.answer[index][ansindex] = value
}else{
this.answer[index].splice(ansindex,1)
}
}
演示
勾选 link https://stackblitz.com/edit/ionic-jsxle7?file=pages%2Fhome%2Fhome.ts