Restrict Duplicate Selection

Introduction

This is a sample showing how to restrict duplicate selection of items in amp-list. This uses amp-selector in combination with amp-bind to check whether or not an item is currently in the list (populated by fruits list).

If the fruit you select is already in the fruits list, the fruits list doesn't change.

If the fruit you select is not already in the fruits list then it's added to the end of the list.

<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
  <title>Restrict Duplicate Selection</title>
  <link rel="canonical" href="https://amp.dev/documentation/examples/interactivity-dynamic-content/restrict_duplicate_selection/index.html">
  <meta name="viewport" content="width=device-width">
  <script async src="https://cdn.ampproject.org/v0.js"></script>

Setup

Import the amp-bind component to hold the selected fruits

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

Import the amp-list component to import the list of fruits to select from

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

Import the amp-selector component so user can choose fruits

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

The amp-mustache component is required if using amp-selector with amp-list

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

Implementation

We use the amp-state element to create a list that's initially empty but will update once user selects fruits. User selects fruits from amp-list element (imported from fruits.json file).

Every time the user tries to select a fruit, the amp-selector element will validate whether or not fruit is already in fruits list. If fruit is not already in the list, amp-selector will change the state of the fruits list with the new fruit at end. If fruit is in fruit-selected list, the list stays the same.

Pick your favorite fruites from this list
You can only add new fruits to the list, you can't add the same fruit multiple times.

Select fruits!

<amp-state id="fruits">
  <script type="application/json">
    []
  </script>
</amp-state>
<p>
  Pick your favorite fruites from this list <br> You can only add new fruits to the list, you can't add the same fruit
  multiple times.
</p>
<div style="resize: horizontal; overflow: auto;">
  <p [text]="fruits">Select fruits!</p>
</div>
<amp-list src="/static/samples/json/fruits.json" height="242" items="." single-item>
  <template type="amp-mustache">
    <ul>
      <amp-selector on="select:AMP.setState({fruits: fruits.includes(event.targetOption) ? fruits : fruits.concat([event.targetOption])})">
        {{#items}}
          <li option="{{name}}" role="button" tabindex="0">
            {{name}}
          </li>
        {{/items}}
      </amp-selector>
    </ul>
  </template>
</amp-list>

Besoin de plus amples explications ?

Si les explications de cette page ne répondent pas à vos questions, n'hésitez pas à contacter d'autres utilisateurs d'AMP pour discuter de votre cas d'utilisation spécifique.

Se rendre sur Stack Overflow

Une fonctionnalité n'a pas encore été expliquée ?

Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.

Modifier l'exemple sur GitHub

Written by @elisameyer