如何显示单选按钮中选择的多个数据? [英] How to display multiple data selected in radio button?

问题描述

这是一个多级手风琴菜单，在第3级，每个项目列表旁边都有一个单选按钮.我希望那里已经有人做过，并且可以解决这个问题.请花一些时间来帮助正在努力使他们的项目实现目标的人，因为该课程没有足够的资源来研究每个问题.谢谢您未来的回答，伙计们，上帝保佑.

This is a multi-level accordion menu and at the 3rd level there is a radio button beside every item list. I'm hoping that there is somebody there already did this and can relate to this problem. Please take time to help somebody that is trying there hard to make things happen for their projects as this course doesn't have much resources to study for every problems. Thank you for your future answers guys god bless.

这不仅是一个典型的单选按钮，其所有数据均来自如下所示的menu.json.

This is not just a typical radio button all its data is from menu.json that looks like this.

menu.json

menu.json

{
  "items": [
    {
      "name": "MAIN",
      "children": [
        {
          "name": "Main Door",
          "children": [
            {
              "name": "Painted door lock"
            },
            {
              "name": "Painted door"
            },
            {
              "name": "Damaged door"
            },
            {
              "name": "Damaged door lock"
            },
            {
              "name": "Painted hinge"
            },
            {
              "name": "Stuck door"
            },
            {
              "name": "With gap below"
            },
            {
              "name": "Paint with cracks"
            },
            {
              "name": "Unfinished door paint"
            },
            {
              "name": "Gaps beside door knob"
            },
            {
              "name": "Door with voids"
            }
          ]
        }
      ]
    }
  ]
}

from.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';


@IonicPage()
@Component({
  selector: 'page-form',
  templateUrl: 'form.html',
})
export class FormPage {
  data: any[];

  constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http) {
    let localData = this.http.get('assets/data/menus.json').map(res => res.json().items);
    localData.subscribe(data => {
      this.data = data;
    });
  }

  toggleSection(i) {
    this.data[i].open = !this.data[i].open;
  }

  toggleItem(i, j) {
    this.data[i].children[j].open = !this.data[i].children[j].open;

  }



  ionViewDidLoad() {
    console.log('ionViewDidLoad FormPage');
  }

}

form.html

form.html

<ion-content>
  <ion-list class="accordion-list">
    <!-- first level -->
      <ion-list-header *ngFor="let item of data; let i = index" no-lines no-padding style="margin-bottom: 0%">

          <button ion-item (click)="toggleSection(i)" detail-none [ngClass]="{'section-active': item.open, 'section': !item.open}">
            <ion-icon item-left name="ios-arrow-forward" *ngIf="!item.open"></ion-icon>
            <ion-icon item-left name="ios-arrow-up" *ngIf="item.open"></ion-icon>
            {{ item.name }}
          </button>

            <ion-list *ngIf="item.children && item.open" no-lines style="margin-bottom: 0%">
              <!-- Second Level -->
              <ion-list-header *ngFor="let child of item.children; let j = index" no-padding style="margin-bottom: 0%">
                <!-- Toggle Button -->
                  <button ion-item (click)="toggleItem(i, j)" detail-none class="child-item" *ngIf="child.children" no-padding no-lines>
                    <ion-icon item-left name="add" *ngIf="!child.open"></ion-icon>
                    <ion-icon item-left name="close" *ngIf="child.open"></ion-icon>
                    {{ child.name }}
                  </button>

            <!-- Direct Add Button -->
            <!-- <ion-item *ngIf="!child.children" detail-none class="child-item" text-wrap no-lines>
              <h2>{{ child.name }}</h2>
              <p text-lowercase>{{ child.information }}</p>
              <button ion-button outline item-end (click)="buyItem(child)">{{ child.price }}</button>
            </ion-item> -->

            <ion-list *ngIf="child.children && child.open">
              <!-- Third-Level -->
              <ion-item *ngFor="let item of child.children" detail-none class="child-item" text-wrap no-lines>
                <ion-label>{{ item.name }}</ion-label>
                <ion-radio  (ionSelect)="selectRad(item)" [value]="item"></ion-radio>
                <!-- <ion-radio slot="end" color="danger" checked></ion-radio> -->

              </ion-item>
            </ion-list>

          </ion-list-header>
        </ion-list>

      </ion-list-header>
    </ion-list>

<div class="issue">
  <ion-card>
    <ion-card-header>
      Problems to be fix
    </ion-card-header>
    <ion-card-content>
      All data that is selected from radio button should display here...
    </ion-card-content>
    <button ion-button full (click)="AreaPage()">Submmit</button>
  </ion-card>
</div>

</ion-content>

所有被选中的数据将像这样显示

All data the is selected will be displayed like this

问题已解决

主要

大门

PAINTED DOOR 

LOCK PAINTED DOOR 

推荐答案

是否可以使用ion-select而不是ion-list解决方案? https://ionicframework.com/docs/api/select

Could using ion-select instead of ion-list be a solution? https://ionicframework.com/docs/api/select

ion-select支持选择多个项目.

ion-select supports multiple items being selected.

这篇关于如何显示单选按钮中选择的多个数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！