如何使用聚合物飞镖重复创建 <select> 元素答案

【问题标题】：How to create a <select> element with polymer-dart repeat如何使用聚合物飞镖重复创建 <select> 元素
【发布时间】：2025-12-06 20:10:01
【问题描述】：

我正在尝试迭代列表以创建选择下拉框。我的代码在下面显示为 Web 组件

<!DOCTYPE html>
<polymer-element name="epimss-name">
  <template>
    <label for='titleCmbo' id='titleLbl'>Title</label>

    <template repeat="{{title in titleList}}">
      <select id='titleCmbo'>
        <option value='{{title}}'>{{title}}</option>
      </select> 
    </template>

  </template>
  <script type="application/dart">

    import 'package:polymer/polymer.dart';

    @CustomTag( 'epimss-name' )
    class NameElement extends PolymerElement
    {
      final List<String> titleList = toObservable([ '', 'Dr', 'Miss', 'Mr', 'Mrs', 'Prof'  ]);
    }

  </script> </polymer-element>
</body>
</html>

就像代码一样，它为每次迭代创建一个单独的组合。如果我将标签移到嵌套模板之外，编辑器会抱怨。

这样做的正确方法是什么？

谢谢

【问题讨论】：

标签： dart dart-polymer

【解决方案1】：

您可以在选项标签上使用模板属性。它将为模板集合中的每个项目重复选项元素和循环值。

<select id="titleCmbo">
  <option value="{{title}}" template repeat="{{title in titleList}}">
    {{title}}
  </option>
</select>

【讨论】：

@st_clair_clarke 您应该通过单击赞成/反对票计数器下方的复选标记来接受答案。