动态 AMP 选择器

【问题标题】：Dynamic AMP Selector动态 AMP 选择器
【发布时间】：2023-03-16 17:20:02
【问题描述】：

如何使用 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>

JS Fiddle

【问题讨论】：

标签： forms amp-html

【解决方案1】：

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

创建一个名为“currentPrice”的状态变量。这将在开始时为空。 But when a radio input is selected, this will have a value and update the text in the h1 element.

所以，在单选按钮中添加这个（相应地更改 currentPrice 的值）：

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

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

[text]="currentPrice"

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

你可以在这里看到 jsfiddle：

Js Fiddle

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

【讨论】：