как создать множественное поле выбора в amp web, в котором 1 комбинированный список в соответствии с другим значением комбинированного списка - PullRequest
Новая
       10

как создать множественное поле выбора в amp web, в котором 1 комбинированный список в соответствии с другим значением комбинированного списка

0 голосов
/ 16 мая 2018 

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

<form method="GET"
  class="p2"
  action="/"
  target="_top">
    <div class="ampstart-input form-elem">
      <label for="sel1" class="form-label">Select1</label>
        <select name="sel1"
          id="sel1"
          on="change:AMP.setState({jsonData: {key : event.value}})">
          <option value="a">car</option>
          <option value="b">shoes</option>
          <option value="c">book</option>
          <option value="d">food</option>
        </select>
      </div>
      <div class="ampstart-input form-elem">
        <label for="sel2" class="form-label">Select2</label>
        <select name="sel2"
          id="sel2">
          <option [text]="jsonData[(jsonData.key)]">a example</option>
        </select>
      </div>
    <amp-state id="jsonData">
      <script type="application/json">
        {"key" : "",
         "a":["mercedes","bmw"],
         "b":["sandal","red shoes"],
         "c":["novel","comic"],
         "d":["rice","mie"]
       }
      </script>
    </amp-state>  
  </form>

как сделать, чтобы выпадающий список 2 содержал множественное значение, полученное из json ... теперь поле выбора содержит только одну опцию, которая выбирает поле, соединяющее массив ... Я хочу получить столько же опций из массива значения json ... например: если в поле со списком 1 выберите книгу, значит, поле со списком 2 будет содержать новые и комические.

Ответы [ 2 ]

0 голосов
/ 20 мая 2018

Как рекомендует Крейг, вам нужно использовать amp-list и amp-mustache для генерации контента.

amp-list может получать свои результаты, используя привязку [src], и будет перебирать каждый результат, используя предоставленную template.

К сожалению, мне не удалось заставить amp-list отображать только теги option. Допустимым обходным решением будет создание тега select, как в связанном раскрывающемся примере.
Чтобы сделать это, вы должны обернуть свои элементы в объект, чтобы amp-list не имел массива, но был объект, и отображать шаблон только один раз, но вы можете перебирать результаты с mustache.

Вы можете сделать это так: 

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

<amp-state id="jsonData">
<script type="application/json">
  {
    "key": "a",
    "a": {"items": [{"name": "mercedes"},{"name": "bmw"}]},
    "b": {"items": [{"name": "sandal"},{"name": "red shoes"}]},
    "c": {"items": [{"name": "novel"},{"name": "comic"}]},
    "d": {"items": [{"name": "rice"},{"name": "mie"}]}
  }
  </script>
</amp-state>

<form method="GET" class="p2" action="/" target="_top">
  <div class="ampstart-input form-elem">
    <label for="sel1" class="form-label">Select1</label>
    <select name="sel1" id="sel1" on="change:AMP.setState({jsonData: {key : event.value}})">
      <option value="a">car</option>
      <option value="b">shoes</option>
      <option value="c">book</option>
      <option value="d">food</option>
    </select>
  </div>
  <div class="ampstart-input form-elem">
    <amp-list [src]="jsonData[jsonData.key]" items="." layout="fixed-height" width="auto" height="25">
      <template type="amp-mustache">
        <label for="sel2" class="form-label">Select2</label>
        <select name="sel2" id="sel2">
          {{#items}}
            <option>{{name}}</option>
          {{/items}}
        </select>
      </template>
    </amp-list>
  </div>
</form>
0 голосов
/ 16 мая 2018

Results

Что на скриншоте показано выше ожидаемого результата?Если это так, то вам просто не хватает сценария amp-form, на который он похож (если запускается только сценарий amp-bind). 

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

Также ознакомьтесь с LinkedРаскрывающиеся страницы на AMP по примеру .Это может быть полезно для того, чего вы пытаетесь достичь.

...