Do you build things with AMP? Fill out the AMP Developer Survey!
AMP
  • email

Conditional State

Introduction

This snippet demonstrates how to create a simple amp-state with conditions.

Setup

We use amp-bind to create a dynamic amp-state.

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

Basic usage

The charState is set by theAMP.setState block in the input component. We check whether the state of user input has changed by using input-throttled. If the state of input has changed, we check current the number of characters in the input (event.value.length) is. The number of characters determines what charState will be set. The item between the ? question mark and the : colon meets the stated condition. The item after the : colon is given for anything that does not meet the stated condition. It is possible to have multiple conditions within the same AMP.setState block.

When a user types < 10 characters in the input section, they see the message "There are under 10 characters, type more!".

When a user types > 10 characters in the input section, they see the message "You have typed over 10 characters, you can stop now.".

Try typing a few characters into the textbox.

<p [text]="charState">
  Try typing a few characters into the textbox.
</p>
<input type="textbox"
  on="input-throttled:AMP.setState({
    charState: event.value.length < 10 ?  
      'There are under 10 characters, type more!' : 
      'You have typed over 10 characters, you can stop now.'
    })">
Ti servono altre spiegazioni?

Se le spiegazioni riportate in questa pagina non rispondono a tutte le tue domande, non esitare a contattare altri utenti AMP per discutere il tuo caso d'uso specifico.

Vai a Stack Overflow
Ci sono funzioni non descritte?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Modifica esempio in GitHub