获取所选纸张单选按钮的多个值 [英] Get multiple values of selected paper-radio-button

问题描述

我有一个dom-repeat元素，可以创建一个带有几个纸质收音机按钮的纸质收音机组。这些单选按钮每个都包含从阵列加载的两条唯一信息。型号名称和价格。我需要能够加载所选单选按钮的型号名称和价格。

I have a dom-repeat element that creates a paper-radio-group with a couple of paper-radio-buttons. These radio-buttons each contains two pieces of unique information loaded from an array. Model name and price. I need to be able to load the model name and price of the selected radio-button.

我可以加载所选模型的名称，但我可以'弄清楚如何在同一时间以价格做到这一点。以下是我目前拥有的显示名称的代码：

I'm able to load the name of the selected model but I can't figure out how to do it with the price at the same time. Here is the code I currently have that displays the name:

<paper-radio-group class="layout vertical" id="modelgrp" selected="{{selected}}" >
<template is="dom-repeat" items="{{models}}" >
<paper-radio-button name="{{item.model}}" id="modelsel"><span>{{item.model}}</span> <div class="paper-font-caption"><span>{{item.price}}</span> SEK</div></paper-radio-button>
</template>
</paper-radio-group>
<paper-item><span>{{selected}}</span></paper-item>

我需要能够调用所选项目的item.price，就像我调用该项目一样.model写{{selected}}。

I need to be able to call the item.price of the selected item just like I call the item.model by writing {{selected}}.

我收到了这个链接因为它有点回答我的问题但我并不真正理解代码以及如何将其应用于我的代码。

I was sent this link as it is sort of answering my question but I don't really understand the code and how to apply it to mine.

推荐答案

使用 selected-item 并为每个值添加条件属性（型号和价格）到 paper-radio-button 元素：

Use selected-item and add a conditional attribute for each value (model and price) onto the paper-radio-button element:

<paper-radio-group class="layout vertical" selected-item="[[selectedItem]]">
  <template is="dom-repeat" items="[[models]]" >
    <paper-radio-button name="{{item.model}}" model$="[[item.model]]" price$="[[item.price]]"><span>[[item.model]]</span> <div class="paper-font-caption"><span>[[item.price]]</span> SEK</div></paper-radio-button>
  </template>
</paper-radio-group>
<paper-item><span>[[model]]</span></paper-item>
<paper-item><span>[[price]]</span></paper-item>

然后设置一个观察者来监控对 selectedItem 并设置要捕获的两个值，如下所示：

Then setup an observer to monitor changes to selectedItem and set the two values you want to capture as follows:

...

observers: [ '_selectedItemChanged(selectedItem)' ],

_selectedItemChanged: function(el) {
  this.price = el.getAttribute('price');
  this.model = el.getAttribute('model');
},

...

这篇关于获取所选纸张单选按钮的多个值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！