Forms 动态放大器选择器

我如何使用AMP动态更改单选按钮中选择的选项（显示40,95€/mes）

<form id="myform" method="get" action-xhr="#" target="_top">
  <amp-selector class="radio-selector" layout="container" name="my-selector">
   <div class="background_gris_0" option="b">
      <label>
         <div class="clm1 left center_input">  
            <input name="answer1"
               value="Value 1"
               type="radio"
               on="change:myform.submit">
         </div>
         <div class="clm8 left">Antes 10GB* / AHORA 20GB / Llamadas  ilimitadas / 19,95€/mes</div>
      </label>
   </div>
   <div class="background_gris_1" option="c">
      <label>
         <div class="clm1 left center_input"><input name="answer1"
            value="Value 2"
            type="radio"
            on="change:myform.submit"></div>
         <div class="clm8 left">Antes 20GB* / AHORA 50GB / Llamadas  ilimitadas / 24,95€/mes</div>
      </label>
   </div>
  </amp-selector>
</form>

<div class="center">
  <h1> 40,95€/mes</h1>
</div>

这可以通过使用amp bind组件来实现。
首先，我想建议您删除放大器选择器单选按钮中的所有更改事件。将“myForm.submit”操作转移到amp select的“select”事件

创建一个名为“currentPrice”的状态变量。这将在开始时为空。但当选择无线电输入时，它将有一个值并更新h1元素中的文本

因此，在单选按钮中添加以下内容（相应地更改currentPrice的值）：

然后，在h1元素中执行以下操作：

[text]="currentPrice"

因此，每当点击单选按钮时，底部的文本都会更新为price

您可以在这里看到JSFIDLE：


为了简单起见，我删除了表单提交事件

[text]="currentPrice"