使用ngModel获取动态复选框的值

时间:2018-04-05 12:07:00

标签: angular ionic-framework angular-ngmodel angular-forms

我有这个结构的数据库

  "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>

请问如何获取已检查选项的值?

3 个答案:

答案 0 :(得分:1)

通过离子复选框中的ionChange函数,您可以创建一个新的答案数组

<强> HTML

org.eclipse.wst.server.core\tmp<n>\conf

<强>打字稿

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

演示

检查链接https://stackblitz.com/edit/ionic-jsxle7?file=pages%2Fhome%2Fhome.ts

答案 1 :(得分:0)

-keep class android.support.v7.widget.SearchView { *; } 输入属性设置为值checked

option.checked

答案 2 :(得分:0)

    //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>