0

我正在使用聚合物纸下拉菜单。

我需要显示数字 1 到 5 的下拉菜单。粗略的做法是

<paper-dropdown-menu label="Numbers" >
  <paper-dropdown class="dropdown">
    <core-menu class="menu">
        <paper-item>1</paper-item>
        <paper-item>2</paper-item>
        <paper-item>3</paper-item>
        <paper-item>4</paper-item>
        <paper-item>5</paper-item>
    </core-menu>
</paper-dropdown>

有没有办法通过使用类似的东西来避免重复<paper-item>代码：<template>

   <template repeat="{{ i in [0:25] }}">
       <paper-item>i</paper-item>
   </template>
4

2 回答 2

1

如评论中所述，聚合物提供的演示中有一个示例。 https://github.com/Polymer/paper-dropdown/blob/master/demo.html

<x-trigger icon="menu">
  <paper-dropdown class="with-margin">
    with margin<br>
    <br>
    <template repeat="{{countries}}">
      {{name}}<br>
    </template>
  </paper-dropdown>
</x-trigger>


scope.countries = [
  {name: 'Afghanistan', code: 'AF'},
  {name: 'Åland Islands', code: 'AX'}
];
于 2015-04-09T21:37:14.433 回答
1

您可以执行“范围”函数来生成数组，然后在已发布的方法中使用该数组。

看起来像

<paper-dropdown-menu label="Numbers" >
  <paper-dropdown class="dropdown">
    <core-menu class="menu">
      <template repeat="{{range}}">
        <paper-item>{{}}</paper-item>
      </template>
    </core-menu>
  </paper-dropdown>
</paper-dropdown-menu>

然后在 js 中创建范围函数

var range = function(begin, end) {
  if (typeof end === "undefined") {
    end = begin; begin = 0;
  }
  var result = [], modifier = end > begin ? 1 : -1;
  for ( var i = 0; i <= Math.abs(end - begin); i++ ) {
    result.push(begin + i * modifier);
  }
  return result;
}

这个范围函数来自这篇文章，它也有几种不同的方法来做到这一点。JavaScript 是否有类似“range()”的方法来根据提供的边界生成数组？

然后将范围分配给重复模板正在使用的聚合物变量

this.range = range(1,25);

希望这可以帮助。抱歉，当我发送最后一个回复时，我昨天去上班了，我无法回答。

编辑：关于 plunker 的示例http://plnkr.co/edit/4TkQdR2B5vakbwOSAulK?p=preview

于 2015-04-10T12:26:46.033 回答