获取所选纸张单选按钮的多个值

Question

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

我可以加载所选型号的名称，但我不知道如何同时加载价格。这是我目前拥有的显示名称的代码：

<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，就像我通过编写 {{selected}} 调用 item.model 一样。

我被发送 this link 因为它有点回答我的问题，但我并不真正理解代码以及如何将其应用到我的代码中。

Answer 1

使用 selected-item 并将每个值（model 和 price）的条件属性添加到 paper-radio-button 元素上：

<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的更改，并设置您要捕获的两个值，如下所示：

...

observers: [ '_selectedItemChanged(selectedItem)' ],

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

...

获取所选纸张单选按钮的多个值

Get multiple values of selected paper-radio-button

html

polymer

polymer-1.0