动态 AMP 选择器

Question

我如何才能动态地将 40,95€/mes 更改为使用 AMP 在单选按钮中选择的选项？

<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>

JS Fiddle

Answer 1

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

创建一个名为 'currentPrice' 的状态变量。这在开始时将为 null。但是当一个单选输入被 selected 时，这将有一个值并更新 h1 元素中的文本。

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

on="tap:AMP.setState({currentPrice: '19,95€/mes'})"

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

[text]="currentPrice"

所以只要点击单选按钮，底部的文本就会更新为价格。

您可以在此处查看 jsfiddle：

Js Fiddle

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

动态 AMP 选择器

Dynamic AMP Selector

forms

amp-html