Polymer: How to repeat dropdown items

Question

I am using Polymer paper-dropdown-menu.

I need to show drop down for numbers 1 to 5. The crude way to do it is

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

Is there a way to avoid repeating <paper-item> code by using <template> Something like:

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

that is the general idea. i am not sure about {{ i in [0:25] }} but everything else looks good. — jimi dough10, Apr 09 '15 at 12:08
yes, i am sure the syntax will not be {{ i in [0:25] }}. That is more Pythonish. But I do not know the exact syntax to get this done — Souvik Basu, Apr 09 '15 at 12:39
Sorry I don't have time at this moment to leave a actual answer. But the demo for paper-drop down-menu has what you are looking for. — jimi dough10, Apr 09 '15 at 12:41

score 1 · Answer 1 · answered Apr 09 '15 at 21:37

1

As mentioned in the comments there is an example in the demo provided by polymer. 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'}
];

answered Apr 09 '15 at 21:37

Kristjan Liiva

9,069
3
25
26

But this needs countries to be an array. To do this I will have to create an array with items as [1, 2, 3, 4, ... 25]. Is there a way to directly tell template how many times to repeat instead of looping on array items – Souvik Basu Apr 10 '15 at 08:44

score 1 · Accepted Answer · edited May 23 '17 at 12:06

you could do a "range" function to produce the array then use the array in the method already posted.

that would look something like

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

then in js you create the range function

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

this range function came from this post which also has several diff methods for doing this. Does JavaScript have a method like "range()" to generate an array based on supplied bounds?

then you assign the range to the polymer variable the repeat template is using

this.range = range(1,25);

hope this helps. sorry i couldn't answer yesterday was leaving for work when i sent last response.

edit: a example on plunker http://plnkr.co/edit/4TkQdR2B5vakbwOSAulK?p=preview

Thanks. This works. I wish Polymer had an inbuilt support to repeat through range of numbers in template instead of support for just arrays. Till then, this will do the work for us — Souvik Basu, Apr 11 '15 at 09:48

Polymer: How to repeat dropdown items

2 Answers2