0

在下面的示例中具有预选值的解决方案是什么？假设从 JSON 检索数据并显示选择框（无需用户交互）时，默认情况下应选择第三个选项。

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<select>
<amp-list width="auto" height="100" layout="fixed-height" src="https://ampproject-b5f4c.firebaseapp.com/examples/data/amp-list-urls.json">
<template type="amp-mustache">
    <option value="{{url}}">{{title}}</option>
</template>
</amp-list>
</select>
4

2 回答 2

2

最简单的方法是selected在选项标签中添加属性以使其成为默认值。

<option selected value="{{url}}">{{title}}</option>

如果您想探索其他选项，此SO 帖子提到了绑定。amp-bind添加与数据绑定和表达式的自定义交互性。

于 2018-11-21T05:18:31.017 回答
0

有一个“小胡子倒置部分”的解决方案，但由于涉及其他因素，它在我的情况下不起作用。

感谢 [AMP 问题支持页面][2] 上的 [Cathy Zhu][1]，我得到了它。

我会提供它，以防它对某人有帮助：

<amp-selector>
<amp-list width="auto" height="200"
  layout="fixed-height"
  src="//amp-list-selector.glitch.me/api/amp-list-data.json">
  <template type="amp-mustache">
    {{#selected}}
    // content displayed if selected is true
    <div class="story-entry"  selected>
      <amp-img src="{{imageUrl}}" width="100" height="100"></amp-img>
    </div>
    {{/selected}}
    {{^selected}}
     // content displayed if selected is false
    <div class="story-entry">
      <amp-img src="{{imageUrl}}" width="100" height="100"></amp-img>
    </div>
    {{/selected}}
  </template>
</amp-list>

对于样本数据：

{

“项目”：[{“标题”：“猫”，“imageUrl”：“ https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n ”，“选择”：真}，

{
  "title": "Dog",
  "imageUrl": "https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n",
  "selected": false
},
{
  "title": "Mouse",
  "imageUrl": "https://lh3.googleusercontent.com/pSECrJ82R7-AqeBCOEPGPM9iG9OEIQ_QXcbubWIOdkY=w400-h300-no-n",
  "selected": false
},

{
  "title": "Fish",
  "imageUrl": "https://lh3.googleusercontent.com/5rcQ32ml8E5ONp9f9-Rf78IofLb9QjS5_0mqsY1zEFc=w400-h300-no-n",
  "selected": false
}

] }

于 2018-11-21T13:19:59.400 回答