标签: amp-bind

如何在 amp-bind 中包含多个动态类？

例如：

<div [class]="condition1 ? 'classA' : 'classB'" [class]="condition2 ? 'classA' : 'classD'"></div>

我有一些选择，最后一个选项是“其他”。

当用户从下拉列表中选择其他选项时，我想显示文本字段。

我正在使用普通的 html，对不起，我是 AMP 初学者，我找到了一些带有 json 选项的 amp-list 示例，但我不知道如何实现，因为我在下拉列表中的选项有限。

<select data-type="text" id="cuisine" name="cuisine" required>
    <option value="german">German wine</option>     
    <option value="baden">Baden cuisine</option>
    <option value="hamburg">Hamburg cuisine</option>
    <option value="others">Others</option>
<select>
<div class="form-group hide" id="other_cusone">
    <label for="other_city_p" class="active">Other :</label>
    <input type="text" id="other_c_p" name="other" placeholder="Other"> 
</div>

谢谢

我想知道如何根据用户选择并将其设置为的选项获取文本内容amp-state。例如，如果用户选择“红色”选项。我想将“胭脂”设置为amp-state“红色”。我知道我可以value通过setState函数中的event.targetOption 获取。但是，找不到如何获取文本并将其设置为amp-state。

<amp-state id="selectedColor">
    <script type="application/json">
    {
        "value": ""
    }
    </script>
</amp-state>

<p>Selected Color <span [text]="selectedColor.value"></span></p>

<amp-selector
  layout="container"
  on="select:AMP.setState({
        selectedColor: {
          value: event.targetOption
        }
      })">
  <div option="red">rouge</div> <!-- user select this -->
  <div option="blue">bleu</div>
  <div option="green">vert</div>
</amp-selector>

我的预期输出如下

<p>Selected Color <span>rouge</span></p>

不

<p>Selected Color <span>red</span></p>

我有一个名为 currentItem 的状态，其中包含 url、标题、描述...当我按下按钮时，currentItem 应保存在名为 myItems 的其他状态中。它将包含一个项目对象列表。

现在的问题是它总是显示最后一个项目，因此它会覆盖每个 currentItem 提交的整个列表。

我的州：

    <amp-state id="currentItem">
        <script type="application/json">
            {
                "url": "",
                "imageUrl": "",
                "title": "",
                "description": ""
            }
        </script>
    </amp-state>
    <amp-state id="myItems">
        <script type="application/json">
            []
        </script>
    </amp-state>

列表定义：

<amp-list class="mt3"
          layout="fixed-height"
          height="0"
          [src]="myItems"
          [height]="myItems.length * 200"
          items="."
          binding="no">
<template type="amp-mustache">
...
</template>

将 currentItem 添加到列表的操作：

<button type="button"
        on="tap:AMP.setState({ myItems: [currentItem]})">
Add
</button>

我尝试使用 AMP.setState({ myItems: myItems.concat(currentItem)}) 但它崩溃了，也与 + 一起崩溃。我怎样才能做到这一点？