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>

Bạn cần được giải thích thêm?

Nếu bạn vẫn còn thắc mắc sau khi đọc hướng dẫn trên trang này, hãy liên hệ với những người dùng AMP khác để thảo luận về trường hợp sử dụng cụ thể của bạn.

Truy cập Stack Overflow

Một tính năng chưa được giải thích?

Dự án AMP đặc biệt khuyến khích sự tham gia và đóng góp của bạn! Chúng tôi hi vọng bạn sẽ trở thành một người tham gia tích cực trong cộng đồng mã nguồn mở của chúng tôi, nhưng chúng tôi cũng chào mừng các đóng góp đơn lẻ về vấn đề mà bạn đặc biệt quan tâm.

Chỉnh sửa mẫu trên GitHub

Written by @elisameyer