Динамический селектор AMP - PullRequest
Новая
       9

Динамический селектор AMP

0 голосов
/ 20 декабря 2018

Как я могу динамически изменить, где написано 40,95 € / мес на параметр, выбранный в переключателях с помощью 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

1 Ответ

0 голосов
/ 20 декабря 2018

Этого можно достичь с помощью компонента amp-bind.Прежде всего, я хотел бы предложить вам удалить все события изменений из переключателей в amp-selector.Переключите это действие myForm.submit на событие select-amp-select.

Создайте переменную состояния с именем 'currentPrice'.Это будет нулевым в начале.Но когда выбран радиовход, он будет иметь значение и обновит текст в элементе h1.

Итак, в переключателях добавьте это (соответственно измените значение currentPrice): 

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

Затем в элементе h1 сделайте следующее: 

[text]="currentPrice"

Таквсякий раз, когда переключается кнопка, текст внизу будет обновляться с ценой.

Вы можете увидеть jsfiddle здесь:

Js Fiddle

Я удалил форму отправки события для простоты.

...