0

Polymer paper-dropdown-menu を使用しています。

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

「範囲」関数を実行して配列を生成し、すでに投稿されているメソッドで配列を使用できます。

それは次のようになります

<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;
}

この範囲関数は、これを行うためのいくつかの diff メソッドもあるこの投稿から来ました。JavaScript には、指定された境界に基づいて配列を生成する「range()」のようなメソッドがありますか?

次に、繰り返しテンプレートが使用しているポリマー変数に範囲を割り当てます

this.range = range(1,25);

お役に立てれば。すみません、昨日返信できませんでした。最後の返信を送ったとき、昨日は仕事に出かけていました。

編集: プランカーの例http://plnkr.co/edit/4TkQdR2B5vakbwOSAulK?p=preview

于 2015-04-10T12:26:46.033 に答える
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 に答える