Get multiple values of selected paper-radio-button

问题

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>

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.

回答1:

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>

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');
},

...

来源：https://stackoverflow.com/questions/32253285/get-multiple-values-of-selected-paper-radio-button

标签

html

html5

polymer

polymer-1.0