amp-html - 如何将 amp-selector 的文本内容设置为 amp-state
问题描述
我想知道如何根据用户选择并将其设置为的选项获取文本内容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>
解决方案
你可以这样做:
<!-- 1. Initialize colorMap -->
<amp-state id="colorMap">
<script type="application/json">
{
"red": "rouge",
"blue": "bleu",
"green": "vert"
}
</script>
</amp-state>
<!-- 2. On select: set new state of selectedColor -->
<amp-selector
layout="container"
on="select:AMP.setState({selectedColor: event.targetOption})">
<div option="red">rouge</div>
<div option="blue">bleu</div>
<div option="green">vert</div>
</amp-selector>
<!-- 3. Bind the selectedColor value as identifier for the colorMap -->
<p>Selected Color <span [text]="colorMap[selectedColor]"></span></p>
- 初始化
colorMap
为预定义<amp-state>
- 选择时:将新状态设置
selectedColor
为单个字符串(不是具有键:值的对象) - 将值绑定
selectedColor
为colorMap
注意颜色图和选择器的值必须一致。我更喜欢使用模板引擎。
推荐阅读
- flutter - Flutter - 从网络加载完整内容页面
- vue.js - 如何在按钮单击vuejs vuetify上添加进度条
- xamarin.forms - 为什么 HttpClient 捕获连接错误?
- jupyter-notebook - 在后台更改笔记本内核
- oracle - Insert 是否需要提交语句
- javascript - Mongoose/Express 中使用的日期字段未在 PUG 中显示
- java - 在源代码中使用 selenium 时如何从命令行编译 java 程序?
- oracle - 创建索引时出现异常“资源繁忙并获取指定的NOWAIT或超时过期”
- c++ - 可以找到Mingw
- php - php Redis::hscan 使用通配符名称和条件检索所有哈希